关于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 
{JSON.stringify(masterProps)}
; }

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

import { useModel } from 'umi'
const College = () => {
  const [userId, setUserId] = useState(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(false)
  const masterProps = useModel('@@qiankunStateFromMaster')
useEffect(() => {
 if (masterProps && masterProps.userId {
   setUserId(masterProps.userId)
 }
},[])
}

你可能感兴趣的:(React,react.js,前端,javascript)