反应：使用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语句中，组件从'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

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