用户类型判断小结

用户类型判断

• ts 需要进行类型推断
• enum 类型尽可能初始直接赋值，后续维护时便于更新
• api 请求需要放在 try/catch 中
• 梳理逻辑，本例中需设置 loding 来确保页面加载正确，否则就出现显示 EnterpriseVersion 再进行正常内容显示

import React from 'react';
import api from '@/common/utils/api';

enum EModelUploadUserType {
    /**
     * 1-个人用户
     */
    PERSONAL_USER = 1,
    /**
     * 2-付费商家
     */
    PAYING_MERCHANT = 2,
    /**
     * 3-其他用户（提示购买企业版）
     */
    OTHER_USER = 3,
}

export default function Layout() {
    const [userType, setUserType] = React.useState<EModelUploadUserType>(EModelUploadUserType.OTHER_USER);
    const [loading, setLoding] = React.useState<Boolean>(true);

    React.useEffect(() => {
        try {
            api.get<EModelUploadUserType>('/modelshow/api/upload/model/user_type').then(res => {
                setUserType(res);
                setLoding(false);
            });
        } catch (e) {
            setUserType(EModelUploadUserType.OTHER_USER);
            setLoding(false);
        }
    }, []);

    if (loading) {
        return null;
    }
    
    if (userType === EModelUploadUserType.OTHER_USER) {
        return <EnterpriseVersion />;
    }

    return (
        <React.Fragment>
            <StyledListContainer id="bg-list-app" ref={bgListRef} />
            {/* <StepsGuide /> */}
        </React.Fragment>
    );
}