React Hooks 报错：Hooks can only be called inside of a function component

Question

使用 useState 挂钩时出现此错误。我有它的基本形式，查看 反应文档 以供参考，但我仍然收到此错误。我准备好面对掌心的时刻……

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

原文由 logandeancall 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

更新时间：2018 年 12 月

新版本 react-hot-loader 现已发布， 链接。 Hooks 现在开箱即用。感谢作者 theKashey。

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

• 反应挂钩
• 反应热加载器
• Webpack、Babel、ESLint 爱彼迎

上一个答案：

首先，确保您安装了 react@next 和 react-dom@next 。

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

在我的例子中，禁用热加载器和 HMR 可以让它工作。

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

引：

是的。 RHL 100% 不兼容钩子。这背后只有几个原因：

SFC 正在转换为类组件。这是有原因的——能够在 HMR 上强制更新，只要 SFC 上没有“更新”方法。我正在寻找其他强制更新的方法（像这样。所以 RHL 正在杀死 SFC。

“热替换渲染器”。 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 的更新。

原文由 Ninh Pham 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

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

原文由 JLarky 发布，翻译遵循 CC BY-SA 4.0 许可协议