我尝试升级到React 17并使用the new JSX Transform来避免import React from 'react'
。当我从组件中删除import React
时,页面崩溃并出现错误(仅在呈现该组件时)。
未定义React
我想我可以用changing my webpack config来解决这个问题:
// module > rules > use > options > presets
{
presets: [
['@babel/preset-react', { runtime: 'automatic' }]
]
}
(It以前只有'@babel/preset-react'
,没有选项。)
编译后,我在控制台中看到几个错误:
警告:呈现其他组件时无法更新组件。
警告:无法在已卸载的组件上执行React状态更新。
警告:无法在现有状态转换期间更新(如在“render”中)。
未捕获的错误:无效的挂接调用。只能在函数组件的主体内部调用挂接。
应用程序加载或多或少正常,直到到达React-Table,然后在出现无效钩子调用错误后不再继续。
我已经更新了一些软件包,以确保它们应该在正确的版本:
{
"@babel/core": "7.16.0",
"@babel/preset-env": "7.16.4",
"@babel/preset-react": "7.16.0",
"babel-loader": "8.2.3",
}
你知道为什么添加{ runtime: 'automatic' }
会扰乱React的运行吗?
1条答案
按热度按时间toe950271#
我在尝试采用
JSX Transform
时也遇到过类似的问题。我想指出您在这里可能遇到的两个问题。1.一旦你将React版本升级到
17/ 16.14.x
,你需要执行npm/yarn clean
和重新安装所有的依赖项并重启服务器。每次你在React〈16.x和React 17分支之间切换时,你都必须这样做。1.您得到的
Uncaught Error: Invalid hook call. Hooks can only be called inside of the body of a function component
与您的任何更改都无关。也许您错误地调用了函数组件之外的钩子,您可以检查代码。一旦修复了这个问题,JSX Transform将工作得非常顺利!!