React技术问题：Invalid hook call报错排查及createRoot替代方案

一、解决"请改用createRoot API"的提示 #

React 18起官方废弃了ReactDOM.render，推荐使用新的createRoot API渲染应用，修改代码末尾的渲染逻辑即可：

1. 替换ReactDOM的导入语句：

// 原导入
import ReactDOM from "react-dom";
// 替换为
import { createRoot } from "react-dom/client";

2. 更新渲染代码：

// 原渲染代码
ReactDOM.render(<Main />, document.getElementById("root"));
// 替换为
const root = createRoot(document.getElementById("root"));
root.render(<Main />);

修改后即可消除该提示，同时适配React 18的新特性。

二、解决"Invalid hook call. Hooks can only be called inside of the body of a function component."错误 #

你的代码全部使用类组件，未直接调用Hooks，但出现该错误可按以下方向排查解决：

1. 检查React与React DOM版本匹配性 #

确保react和react-dom版本完全一致，且版本不低于16.8（Hooks的最低支持版本）。在项目根目录执行命令查看版本：

npm list react react-dom

若版本不一致或低于要求，执行升级命令：

npm install react@latest react-dom@latest

2. 验证依赖库兼容性 #

你使用的react-bootstrap若版本过高（如v2+），需要React 16.14及以上版本支持。查看package.json中的react-bootstrap版本，若版本不兼容，要么升级React到对应版本，要么降级react-bootstrap至适配当前React的版本。

3. 排查多React副本问题 #

项目中存在多个React实例会导致Hook调用失败：

• 删除项目根目录的node_modules文件夹和package-lock.json（或yarn.lock）文件
• 重新安装依赖：

npm install

安装完成后再次执行npm list react，确认仅存在一个React实例。

补充说明 #

虽然你的代码未直接使用Hooks，但react-bootstrap内部可能调用了Hooks，因此必须满足Hooks的运行环境要求。按上述步骤排查后，该错误即可解决。

内容的提问来源于stack exchange，提问作者ishu gupta