反应：Stackblitz 的无效钩子调用

Question

这是我第一次将 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 问题 why material-UI textField returns 'Invalid hook call' error 以寻求解决方案，但它是为了更新 React 的版本，所以我不知道从这里去哪里才能正确编译。

Answer 1

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

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

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