React:Stackblitz 的无效钩子调用

React: Invalid hook call with Stackblitz

这是我第一次将 Stackblitz 用于示例项目,我一直 运行 遇到此错误:

Error in /turbo_modules/react@16.10.2/cjs/react.development.js (1607:26)
Invalid hook call.

该项目在本地运行良好,并且能够在 Stackblitz 上无错误地编译,但是当我单击按钮时出现错误。

https://stackblitz.com/edit/react-ef9gan

在从 'import react from 'react'import React, { Component } from 'react'

的组件中的导入语句中

我还从 stackblitz 中删除了 react-router-dom 依赖项,因为此项目不需要它。

根据文档,出现这种情况的原因可能有以下三个:

There are three common reasons you might be seeing it:

1. You might have mismatching versions of React and React DOM.
2. You might be breaking the Rules of Hooks.
3. You might have more than one copy of React in the same app.
  1. 我的本地项目和示例都是运行 16.9.0。

  2. 我对反应还比较陌生,所以我不确定我在这里做错了什么,因为它在本地工作。

  3. 查看依赖项,我没有看到任何重复文件。

我查看了这个 SO 问题 以寻求解决方案,但它是为了更新 React 的版本,所以我不确定从这里到哪里才能正确编译。

升级你的反应依赖修复它。

https://stackblitz.com/edit/react-wk49k9?file=index.js

如果第 3 方包作者未将 react 指定为对等依赖项,则这些问题在较新版本的 react 上更常发生。这通常会导致多个版本的 React 安装到 node_modules 中的 packages 文件夹中,从而触发此错误。