关于UMI中 useModel的使用(踩坑记录)
最近用React + UMI +qiankun的框架撸了一个后台管理系统,主应用使用的qiankun做的微前端,子运用使用的是UMI搭建的React 项目,涉及到主应用与子运用的通信问题。1.主应用用的qiankun中的registerMicroApps进行的传值,代码如下:registerMicroApps([{name: 'react app', // app name registerede
·
最近用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)
}
},[])
}
更多推荐
已为社区贡献2条内容
所有评论(0)