React Hooks 错误：只能在函数组件体内调用 Hooks

我在使用时收到此错误useState钩。我有它的基本形式，看看反应文档 https://reactjs.org/docs/hooks-reference.html#usestate供参考，但我仍然收到此错误。我已经准备好迎接掌脸时刻了……

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

更新时间：2018 年 12 月

新版本react-hot-loader现在已经出来了，link https://github.com/gaearon/react-hot-loader/issues/1088#issuecomment-446938770。 Hooks 现在可以开箱即用。感谢作者 theKashey。

查看此样板https://github.com/ReeganExE/react-hooks-boilerplate https://github.com/ReeganExE/react-hooks-boilerplate

• 反应钩子
• 反应热加载器
• Webpack、Babel、ESLint Airbnb

上一个答案：

首先，确保你安装了react@next and react-dom@next.

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

就我而言，禁用热加载器和 HMR 可以让它工作。

See https://github.com/gaearon/react-hot-loader/issues/1088 https://github.com/gaearon/react-hot-loader/issues/1088#issuecomment-433537974.

Quoted:

是的。 RHL 100% 不兼容 hooks。只有几个 其背后的原因：

SFC 正在转换为类组件。有理由——存在 能够在 HMR 上强制更新，只要没有“更新”方法 证监会。我正在寻找其他强制更新的方法（就像这样。所以 RHL 正在扼杀 SFC。

“热替换渲染”。 RHL 正在尝试做 React 的工作，并进行渲染 旧的和新的应用程序，将它们合并。所以，显然，这已经被打破了 现在。

我将起草一份 PR，以缓解这两个问题。它会起作用，但是 今天不行。

有一个更合适的修复方法，可以工作 -cold API https://github.com/gaearon/react-hot-loader#disabling-a-type-change-%EF%B8%8F

您可以禁用任何自定义类型的 RHL。

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

cold(MyComponent);

搜索"useState/useEffect"内部组件源代码，并“冷”它。

Updated:

As per updated https://github.com/gaearon/react-hot-loader/issues/1088#issuecomment-441191107来自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 的更新。