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

小编典典

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

reactjs

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

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

阅读 923

2020-07-22

共1个答案

小编典典

更新时间：2018年12月

的新版本react-hot-loader现已发布，链接。Hooks现在可以立即使用。感谢作者theKashey。

查看此样板 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组件。原因是-
只要SFC上没有“更新”方法，就可以在HMR上强制更新。我正在寻找强制更新的其他方式（像这样。所以RHL正在杀死SFC。

“ hotReplacementRender”。RHL正在尝试做React的工作，并渲染新旧应用，以将其合并。所以，很显然，这已经被打破了。

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

有一个更合适的修补程序，它将起作用-Cold 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的更新。

2020-07-22