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

Question

我在使用useState钩子时遇到此错误.我有它的基本形式,查看反应文档作为参考,但我仍然得到这个错误.我已准备好面对掌心时刻......

export function Header() {
  const [count, setCount] = useState(0)
  return <span>header</span>
}

Answer 1

更新:2018年 - 12月

react-hot-loader现在是新版本,链接.钩子现在正在开箱即用.感谢作者,Kashey.

看看这个样板https://github.com/ReeganExE/react-hooks-boilerplate

• 反应钩子
• 反应热装载机
• Webpack,Babel,ESLint Airbnb

上一个答案:

首先,确保你安装react@next和react-dom@next.

然后检查您是否正在使用react-hot-loader.

在我的情况下,禁用热加载器和HMR可以使其工作.

请参阅https://github.com/gaearon/react-hot-loader/issues/1088.

引:

是.RHL 100%与钩子不兼容.它背后有几个原因:

SFC正在转换为Class组件.有理由 - 能够在HMR上强制更新,只要SFC上没有"更新"方法.我正在寻找强制更新的其他方式(就像这样.所以RHL正在杀死SFC.

"hotReplacementRender".RHL正在尝试做React的工作,并渲染旧的和新的应用程序,以合并它们.显然,现在已经破了.

我将起草PR,以缓解这两个问题.它会起作用,但不是今天.

有一个更合适的修复,它可以工作 - 冷API

您可以为任何自定义类型禁用RHL.

import { cold } from 'react-hot-loader';

cold(MyComponent);

搜索"useState/useEffect"内部组件源代码,并"冷"它.

更新:

根据react-hot-loader维护者的更新,您可以尝试react-hot-loader@next将配置设置为:

import { setConfig } from 'react-hot-loader';

setConfig({
  // set this flag to support SFC if patch is not landed
  pureSFC: true
});

感谢@loganfromlogan的更新.

Answer 2

我的问题是忘记更新react-dom模块.看问题.

Answer 3

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

<Route render={ComponentUsingHooks} />

代替

<Route component={ComponentUsingHooks} />