umi-plugin-keep-alive icon indicating copy to clipboard operation
umi-plugin-keep-alive copied to clipboard

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

Open 1769762790 opened this issue 2 years ago • 4 comments

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

image image

1769762790 avatar Sep 01 '22 02:09 1769762790

同样的问题

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 代码重现

ZhengXinquan avatar Sep 02 '22 10:09 ZhengXinquan

在 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']
)

CJY0208 avatar Sep 02 '22 10:09 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']
)

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

AlwaysLoveme avatar Jul 27 '23 12:07 AlwaysLoveme

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

Xiaoaomi147 avatar Jul 10 '24 02:07 Xiaoaomi147