Visual Studio React 模板项目 - 错误：无效的挂钩调用

Question

我正在使用 Visual Studio 2022 中的 React Web 应用程序模板来创建一个 Web 项目。

创建项目后，我安装了一个使用钩子实现的组件，例如通过包管理命令的 React-Bootstrap -

npm install react-bootstrap [email protected]

然后我将其导入到 home.js -

import Button from 'react-bootstrap/Button';

并添加一个元素 -

<div>
  <Button variant="primary">Button #1</Button>
  <Button variant="secondary" className="mx-2">Button #2</Button>
  <Button variant="success">Button #3</Button>
</div>

运行项目，我收到以下错误 -

错误：无效的挂钩调用。钩子只能在函数组件的主体内部调用。发生这种情况的原因之一可能是： 1. 您的 React 和渲染器版本可能不匹配（例如 React DOM） 2. 您可能违反了 Hooks 规则 3. 您可能在其中拥有多个 React 副本相同的应用程序请参阅 https://reactjs.org/link/invalid-hook-call 了解有关如何调试和解决此问题的提示。

我没有添加任何其他代码，我认为模板中的代码有问题，但我无法找出问题所在。

Answer 1

看起来模板生成的 React 代码使用的是较旧的 React 16.0，而 home.js 仍然是基于类的组件。

通过命令“npm install react”和“npm install react-dom”（升级到16.14）升级react和react-dom，并将Home.js组件更改为基于函数的组件解决了我的问题。