alitajs / umi-plugin-keep-alive

<KeepAlive> for umijs base on react-activation
https://www.npmjs.com/package/umi-plugin-keep-alive
MIT License
289 stars 23 forks source link

@umijs/max 4.0 useMode, TypeError: Cannot read properties of null (reading 'dispatcher') #78

Closed ZhengXinquan closed 2 years ago

ZhengXinquan commented 2 years ago

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

Originally posted by @ZhengXinquan in https://github.com/alitajs/umi-plugin-keep-alive/issues/76#issuecomment-1235310615

CJY0208 commented 2 years ago

在 src 中增加以下代码试试

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']
)
ZhengXinquan commented 2 years ago

在 src 中增加以下代码试试

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

测试有效,谢谢🙏