React Hooks错误：只能在函数组件的主体内部调用挂钩

Question

我在使用useStatehook时遇到此错误。我有它的基本形式，查看react文档作为参考，但仍然得到这个错误。我已经准备好面对掌心时刻。。。

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

Answer 1

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

<Route render={ComponentUsingHooks} />

而不是

<Route component={ComponentUsingHooks} />

Answer 2

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

Answer 3

新版本的react-hot-loader现已推出，链接。钩子现在正在开箱工作。感谢作者TheKashey。

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

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

首先，确保已安装react@next和反应-dom@next。

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

在我的情况下，禁用热加载程序

看见https://github.com/gaearon/react-hot-loader/issues/1088.

引用：

对RHL与挂钩100%不兼容。这背后只有几个原因：

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

“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的更新。