异步请求与页面渲染的先后顺序矛盾

背景

如下图中枚举值使用接口从后端拿取,使用的dva

const mapStateToProps = (state) => {
    return {
        state: state[DICT_BIZ_NAMESPACE].data,
        state1: state[DICT_NAMESPACE].data,
        clubList: state[DEPT_NAMESPACE].data,
    };
};
export default connect(mapStateToProps)(HireAddDrawer);

问题

每次点击新增打开该弹窗，发现红框中的枚举值有时候存在，有时候不存在，原来的代码是将枚举值初始化到state中：

  const [certificateOptions, setCertificateOptions] = useState(getSelectOptions(getDictBiz('certificates', state1.list)));
  const [personalProveOptions, setPersonalProveOptions] = useState(getSelectOptions(getDictBiz('identityProof', state1.list)));

但由于该枚举值走了请求，是异步的，有可能页面渲染了，该接口内容还未返回，所以会出现空白

解决方案

使用useEffect监听，有共同的依赖项state1可以写在一起：

    useEffect(() => {
        setCertificateOptions(getSelectOptions(getDictBiz('certificates', state1.list)));
        setPersonalProveOptions(getSelectOptions(getDictBiz('identityProof', state1.list)));
    }, [state1]);

当接口返回值时，页面再刷新一次即可。