84

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

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

19 回答 19

42

更新时间：2018 年 12 月

新版react-hot-loader已经出，链接。Hooks 现在开箱即用。感谢作者，the Kashey。

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

  • 反应钩子
  • React 热加载器
  • 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 正在杀死证监会。

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

于 2018-10-28T08:11:04.980 回答
33

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

于 2018-11-05T08:30:59.370 回答
22

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

<Route render={ComponentUsingHooks} />

代替

<Route component={ComponentUsingHooks} />
于 2019-02-28T10:01:49.750 回答
3

只是为了详细说明@rista404 的答案，包括（可能）的重复版本会产生相同的错误，具体取决于您使用钩子的位置。这里有两个例子...reactreact-dom

  1. 外部依赖项包括另一个版本的reactin 它dependencies，可能是错误的，react通常应该是对等依赖项。如果npm没有使用您的本地版本自动对该版本进行重复数据删除，您可能会看到此错误。这就是@rista404 所指的。
  2. 您npm link包含react在其devDependenciesor中的包dependencies。现在，对于这个包中的模块，如果它们react从本地node_modules目录而不是父项目的目录中提取不同的版本，您可能会看到错误。

后者可以在捆绑时webpack通过resolve.alias像这样使用来修复......

    resolve: {
        alias: {
            'react': path.resolve(__dirname, 'node_modules/react'),
            'react-dom': path.resolve(__dirname, 'node_modules/react-dom')
        }
    }

这将确保react始终从父项目的node_modules目录中提取。

于 2019-06-17T14:18:50.567 回答
3

我在 monorepo 中遇到了一个问题，其中使用了一个包doczreact@16.6.3，最终输出包有两个反应版本。

Github 上的问题

通过删除包修复它

于 2018-11-20T11:51:04.120 回答
3

我可以通过在组件文件中导入 React 的原始钩子来解决这个问题，然后将它们传递给我的自定义钩子。出于某种原因，仅当我在自定义挂钩文件中导入 React 挂钩（如 useState）时才会发生错误。

我在我的组件文件中导入 useState：

import React, {useState} from 'react'; // import useState

import {useCustomHook} from '../hooks/custom-hook'; // import custom hook

const initialState = {items: []};
export default function MyComponent(props) {
    const [state, actions] = useCustomHook(initialState, {useState});
    ...
}

然后在我的钩子文件中：

// do not import useState here

export function useCustomHook(initialValue, {useState}) {
    const [state, setState] = useState(initialValue || {items: []});

    const actions = {
        add: (item) => setState(currentState => {
            const newItems = currentState.items.concat([item]);
            return {
                ...currentState,
                items: newItems,
            };
        }),
    };

    return [state, actions];
}

这种方法提高了我的钩子的可测试性，因为我不需要模拟 React 的库来提供原始钩子。相反，我们可以将模拟useState钩子直接传递到自定义钩子的函数中。我认为这提高了代码质量，因为您的自定义钩子现在与 React 库没有耦合，允许更自然的函数式编程和测试。

于 2018-11-04T09:31:31.737 回答
3

我在使用Parcel 的 Hot Module Replacement时遇到了这个错误，并通过更新react-dom到它的 alpha 版本来修复：

yarn add react-dom@16.7.0-alpha.0

看到这个问题。

于 2018-11-13T16:51:12.230 回答
3

如果您在使用 npm link 时遇到此问题，另一种解决方案：

您可以npm link按照此处的说明在您的库中做出反应： https ://reactjs.org/warnings/invalid-hook-call-warning.html#duplicate-react

或将您的库中的反应设置为 peerDependency 然后使用npm link --only=production

于 2019-12-05T10:46:34.690 回答
2

2021 年 6 月的答案

我一直在使用react-electron-boilerplate应用程序遇到这个问题。

由于这个不幸的错误，许多插件和库（如 Material-UI）无法在我的项目中使用，经过大量搜索，我可以解决问题：

我刚刚将reactand升级react-dom到他们的最新版本。

这个命令完成了工作！

yarn add react@latest react-dom@latest
于 2021-06-13T14:39:38.260 回答
2

对于那些在使用 MobX 并使用 包装组件时遇到此问题的人observer，请确保使用mobx-react-lite而不是mobx-react.

5月29日更新

mobx -react 现在支持基于钩子的组件mobx-react 6.0.0，因此不再需要使用（如果这是您的问题）。mobx-react-lite

于 2019-03-28T14:26:14.790 回答
2

我的问题如下：

我在做： ReactDOM.render(Example(), app);

而我应该一直在做： ReactDOM.render(<Example />, app);

于 2019-02-26T08:20:22.497 回答
2

对我来说问题确实是react-hot-loader。

您可以使用以下方法禁用单个组件而不是整个应用程序的react-hot-loader cold：

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

export const YourComponent = cold(() => {

  // ... hook code

  return (
    // ...
  )
})

或者

export default cold(YourComponent)
于 2018-10-30T06:04:20.527 回答
1

找到了这个解决方法，react-hot-loader而修复它的 PR 是入站的。

将调用钩子的函数包装在 a 中React.memo，如果未更改，则防止热重载。

const MyFunc = React.memo(({props}) => {...

解决方案的信用： https ://github.com/gatsbyjs/gatsby/issues/9489

于 2018-11-15T00:36:44.723 回答
1

好吧，在我的案例中，我在 useEffect 中调用了 useSelector ！

于 2020-10-29T11:26:43.627 回答
1

对于纱线工作区的其他用户，这是我的情况以及我是如何解决的。

  • 包
    • 富
      • 反应@16.8.6
    • 酒吧
      • 反应@16.10.1

关于Invalid Hook Call Warning的 Facebook 文档对纱线工作区只字未提，所以我认为我的配置是正确的。但事实并非如此。您只能通过在所有包中使用相同的版本来修复错误。

在上面的示例中，您必须将 react 的版本从“foo”提升到 16.10.1，以便它与“bar”的 react 版本匹配。

奖励：请参阅 GitHub 上的此讨论，了解在 Internet 上卸载的精美情感包袱合集。

于 2019-09-28T21:13:28.167 回答
0

如果您使用的是 Create React App，您还必须"react-scripts"使用 react 和 react-dom 版本更新版本。

 "react-scripts": "2.1.5",
 "react": "^16.8.1",
 "react-dom": "^16.8.1",

这种组合效果很好。

于 2019-02-12T07:55:59.450 回答
0

对我来说，这是因为我有一个新版本的 react (16.8.6) 和一个旧版本的 react-dom (16.6.1)。

https://reactjs.org/warnings/invalid-hook-call-warning.html#mismatching-versions-of-react-and-react-dom

将两者都升级到 @latest (16.8.6) 修复了该错误。

于 2019-07-12T17:09:24.770 回答
0

检查react和react-dom版本严格相等。注意版本上的抑扬^符符号。

"17.0.0"不能和"^17.0.0"

npm - Carret Ranges：https ://github.com/npm/node-semver#caret-ranges-123-025-004 React - 变更日志：https://github.com/facebook/react/blob/main/CHANGELOG。 MD

这是使用 -E 或 --save-exact 更好地安装软件包的原因之一

npm install --save --save-exact <package@vesion>
于 2021-10-26T15:33:03.740 回答
-5

将 package.json react-dom 版本更新为 react

于 2018-11-28T03:07:56.683 回答