umi4 的max 通过useModel 获取全局初始状态报错

[1769762790]

使用keepAlive 包裹组件后，在组件内部获取全局初始状态报错 const { initialState } = useModel('@@initialstate');

[ZhengXinquan]

同样的问题

codesandbox 代码重现

描述：

"@umijs/max": "^4.0.17" 使用 useMode 报错： TypeError: Cannot read properties of null (reading 'dispatcher') 或 TypeError: _useContext is null

操作：

$ mkdir myapp && cd myapp
$ yarn create umi
✔ Pick Umi App Template › Ant Design Pro
✔ Pick Npm Client › yarn
✔ Pick Npm Registry › taobao
yarn add umi-plugin-keep-alive
.umirc.ts 添加插件 plugins: ['umi-plugin-keep-alive']
修改src/pages/home/index.ts

import Guide from '@/components/Guide';
import { trim } from '@/utils/format';
import { PageContainer } from '@ant-design/pro-components';
import { useModel, KeepAlive } from '@umijs/max';
import { useState } from 'react';
import styles from './index.less';

const Counter: React.FC = () => {
  const [count, setCount] = useState(0);
  const { name } = useModel('global');
  return (
    <div>
      <h1>useModel.global.name : {name}</h1>
      <p>count: {count}</p>
      <button onClick={() => setCount((count) => count + 1)}>add</button>
    </div>
  );
};

const HomePage: React.FC = () => {
  const { name } = useModel('global');
  return (
    <PageContainer ghost>
      <KeepAlive>
        <Counter />
      </KeepAlive>
      <div className={styles.container}>
        <Guide name={trim(name)} />
      </div>
    </PageContainer>
  );
};

export default HomePage;

重现：

codesandbox 代码重现

[CJY0208]

在 src/app.ts 中增加以下代码试试

import { autoFixContext } from 'react-activation';
import jsxRuntime from 'react/jsx-runtime'
import jsxDevRuntime from 'react/jsx-dev-runtime'
 
autoFixContext(
  [jsxRuntime, 'jsx', 'jsxs', 'jsxDEV'],
  [jsxDevRuntime, 'jsx', 'jsxs', 'jsxDEV']
)

[AlwaysLoveme]

在 src/app.ts 中增加以下代码试试

import { autoFixContext } from 'react-activation';
import jsxRuntime from 'react/jsx-runtime'
import jsxDevRuntime from 'react/jsx-dev-runtime'
 
autoFixContext(
  [jsxRuntime, 'jsx', 'jsxs', 'jsxDEV'],
  [jsxDevRuntime, 'jsx', 'jsxs', 'jsxDEV']
)

我是这么加在 src/app.tsx 中的，但是不起作用，仍旧报上述错误，@umijs/max版本：4.0.73
目前我是通过写了个 patch 函数，在 运行项目之前，将 access 插件和 model 插件 中的 React.createContext 替换成了 从 react-activation 导出的 createContext ，啥时候可以修复这个问题呢？ @CJY0208

[Xiaoaomi147]

没有app.ts就新建一个 亲测有效 umi.js

[xutianting]

在 src/app.ts 中增加以下代码试试

import { autoFixContext } from 'react-activation';
import jsxRuntime from 'react/jsx-runtime'
import jsxDevRuntime from 'react/jsx-dev-runtime'
 
autoFixContext(
  [jsxRuntime, 'jsx', 'jsxs', 'jsxDEV'],
  [jsxDevRuntime, 'jsx', 'jsxs', 'jsxDEV']
)

这个可以解决umi里用到的Context跟外层包的Context 报错的问题