关于UMI中 useModel的使用（踩坑记录）

最近用React + UMI +qiankun的框架撸了一个后台管理系统，主应用使用的qiankun做的微前端，子运用使用的是UMI搭建的React 项目，涉及到主应用与子运用的通信问题。
1.主应用用的qiankun中的registerMicroApps进行的传值，代码如下：

registerMicroApps([
  {
    name: 'react app', // app name registered
    entry: '//localhost:8080',
    container: '#yourContainer',
    activeRule: '/yourActiveRule',
     props:{
      userId:'xxx'
     }
  },

2.子应用根据UMI提供的API：

import { useModel } from 'umi';

function MyPage() {
  const masterProps = useModel('@@qiankunStateFromMaster');
  return <div>{JSON.stringify(masterProps)}</div>;
}

所以按照官网的API的写法，我一开始是在项目中这样获取并赋值的

import { useModel } from 'umi'
const College = () => {
  const [userId, setUserId] = useState<React.ReactNode>(false)
 const masterProps = useModel('@@qiankunStateFromMaster')
 if (masterProps && masterProps.userId {
   setUserId(masterProps.userId)
 }
}

部署子应用后，一直报错

经过分析发现，原来是不能这么写，赋值的时候得放到hooks钩子函数中：

import {  useEffect } from 'react'
import { useModel } from 'umi'
const College = () => {
  const [userId, setUserId] = useState<React.ReactNode>(false)
  const masterProps = useModel('@@qiankunStateFromMaster')
useEffect(() => ｛
 if (masterProps && masterProps.userId {
   setUserId(masterProps.userId)
 }
｝,[])
}