React Hooks错误:只能在函数组件的主体内部调用Hook

使用useState挂钩时出现此错误我有它的基本形式,正在看react docs作为参考,但是仍然出现此错误。我已经准备好面对手掌的时刻...

export function Header() {
  const [count, setCount] = useState(0)
  return <span>header</span>
}
逆天伽罗宝儿2020/03/18 18:40:05

对于纱线工作区的其他用户,这是我的处境以及解决方法。

  • 包装
      • react@16.8.6
    • 酒吧
      • 反应@ 16.10.1

关于Invalid Hook Call Warning的Facebook文档对纱线工作区一无所知,因此我认为我的配置正确。但事实并非如此。您只能通过在所有软件包中使用相同版本来解决错误

在上面的示例中,您必须将react的版本从“ foo”提高到16.10.1,以便它与“ bar”中的react版本匹配。

奖励:请在GitHub上查看此讨论,以获取在互联网上分载的美丽情感包。

LEY逆天2020/03/18 18:40:05

将package.json react-dom版本更新为react

前端Stafan2020/03/18 18:40:05

如果使用Create React App,则还必须"react-scripts"使用react和react-dom版本更新版本。

 "react-scripts": "2.1.5",
 "react": "^16.8.1",
 "react-dom": "^16.8.1",

这种组合效果很好。

十三西里古一2020/03/18 18:40:05

对我而言,发生这种情况是因为我有一个新版本的react(16.8.6)和一个旧版本的react-dom(16.6.1)。

https://reactjs.org/warnings/invalid-hook-call-warning.html#mismatching-versions-of-react-and-react-dom

都升级到@latest(16.8.6)修复了该错误。

Pro阿飞Davaid2020/03/18 18:40:05

如果使用npm链接时遇到此问题,则可以使用另一种解决方案:

您可以npm link按照以下说明在您的库中做出反应:https : //reactjs.org/warnings/invalid-hook-call-warning.html#duplicate-react

或在您的库中将react设置为peerDependency,然后使用 npm link --only=production

EvaMandy2020/03/18 18:40:05

我的问题如下:

我在做: ReactDOM.render(Example(), app);

而我应该一直在做: ReactDOM.render(<Example />, app);

逆天小哥蛋蛋2020/03/18 18:40:05

对于使用MobX并使用包裹组件时遇到此问题的人员observer,请确保使用mobx-react-lite而不是mobx-react

5月29日更新

现在mobx-react 6.0.0开始,mobx-react现在支持基于钩子的组件,因此不再需要mobx-react-lite使用(如果那是您的问题)。

TomGreen2020/03/18 18:40:05

react-hot-loader在该PR入站时发现此替代方法

在内包装调用钩子的函数,以React.memo防止在未更改的情况下进行热重载。

const MyFunc = React.memo(({props}) => {...

解决方案功劳:https : //github.com/gatsbyjs/gatsby/issues/9489

村村卡卡西2020/03/18 18:40:05

我在一个monorepo,其中包有一个问题docz使用react@16.6.3以及最终输出束有两个反应的版本。

在Github上发行

通过移除包装进行固定it

猿村村2020/03/18 18:40:04

我在使用Parcel的Hot Module Replacement时遇到此错误,并通过更新react-dom为Alpha版本进行了修复

yarn add react-dom@16.7.0-alpha.0

看到这个问题。

小哥十三2020/03/18 18:40:04

有同样的问题。我的问题与React Router有关。我不小心用了

<Route render={ComponentUsingHooks} />

代替

<Route component={ComponentUsingHooks} />
GreenJinJin2020/03/18 18:40:04

我的问题是忘记更新react-dom模块。见问题