使用useState
挂钩时出现此错误。我有它的基本形式,正在看react docs作为参考,但是仍然出现此错误。我已经准备好面对手掌的时刻...
export function Header() {
const [count, setCount] = useState(0)
return <span>header</span>
}
使用useState
挂钩时出现此错误。我有它的基本形式,正在看react docs作为参考,但是仍然出现此错误。我已经准备好面对手掌的时刻...
export function Header() {
const [count, setCount] = useState(0)
return <span>header</span>
}
将package.json react-dom版本更新为react
如果使用Create React App,则还必须"react-scripts"
使用react和react-dom版本更新版本。
"react-scripts": "2.1.5",
"react": "^16.8.1",
"react-dom": "^16.8.1",
这种组合效果很好。
对我而言,发生这种情况是因为我有一个新版本的react(16.8.6)和一个旧版本的react-dom(16.6.1)。
都升级到@latest(16.8.6)修复了该错误。
如果使用npm链接时遇到此问题,则可以使用另一种解决方案:
您可以npm link
按照以下说明在您的库中做出反应:https :
//reactjs.org/warnings/invalid-hook-call-warning.html#duplicate-react
或在您的库中将react设置为peerDependency,然后使用 npm link --only=production
我的问题如下:
我在做:
ReactDOM.render(Example(), app);
而我应该一直在做:
ReactDOM.render(<Example />, app);
对于使用MobX并使用包裹组件时遇到此问题的人员observer
,请确保使用mobx-react-lite
而不是mobx-react
。
5月29日更新
从现在mobx-react
6.0.0
开始,mobx-react现在支持基于钩子的组件,因此不再需要mobx-react-lite
使用(如果那是您的问题)。
react-hot-loader
在该PR入站时发现此替代方法。
在内包装调用钩子的函数,以React.memo
防止在未更改的情况下进行热重载。
const MyFunc = React.memo(({props}) => {...
我在使用Parcel的Hot Module Replacement时遇到此错误,并通过更新react-dom
为Alpha版本进行了修复:
yarn add react-dom@16.7.0-alpha.0
有同样的问题。我的问题与React Router有关。我不小心用了
<Route render={ComponentUsingHooks} />
代替
<Route component={ComponentUsingHooks} />
我的问题是忘记更新react-dom
模块。见问题。
对于纱线工作区的其他用户,这是我的处境以及解决方法。
关于Invalid Hook Call Warning的Facebook文档对纱线工作区一无所知,因此我认为我的配置正确。但事实并非如此。您只能通过在所有软件包中使用相同版本来解决错误。
在上面的示例中,您必须将react的版本从“ foo”提高到16.10.1,以便它与“ bar”中的react版本匹配。
奖励:请在GitHub上查看此讨论,以获取在互联网上分载的美丽情感包。