附最终webpack、packjson、.eslintrc配置
官方文档:https://ant.design/docs/react/migration-v5-cn
1、安装运行工具之前,提交本地修改内容;
2、工具运行完,根据提示修改文件问题;
3、移除config文件中module,
['import',{libraryName:'antd', libraryDirectory: 'es', style:'css'}]
4、新路径import zhCN from 'antd/locale/zh_CN';
5、Uncaught TypeError: dispatcher.useId is not a function
https://zh-hans.reactjs.org/docs/hooks-reference.html#useid
useId
是一个用于生成横跨服务端和客户端的稳定的唯一 ID 的同时避免 hydration 不匹配的 hook。
在新版的ReactV18版本新增hook,以校验组件唯一id来提升渲染性能。这里通过降级到V17版本解决。
6、Uncaught Invariant Violation: Maximum update depth exceeded. 原因是,新版react中在render有立即执行的函数,函数执行进而触发render,陷入循环,修改如图所示,表示需手动触发;
onClick={this.showOrderDetails(item)}
为
onClick={() => this.showOrderDetails(item)}
7、检查V4、V5不兼容的组件和写法即可;
8、包裹组件,识别热更;
9、Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops.
发生这个问题有两处地方,根因一致,通过控制台提示,知道上述报错是在哪里,哪个组件引起,发现是