React报错Invalid hook call无效Hook调用问题排查求助

你提供的项目入口代码不存在Hook调用错误，可按以下步骤逐一排查问题：

1. 排查React与相关依赖版本不匹配问题 #

• 执行命令npm ls react react-dom检查两者版本，需保证大版本号完全一致，例如React 17要搭配React DOM 17使用，若你本地已升级到React 18，你当前使用的ReactDOM.render为旧版API，也可能触发兼容类报错，需修改为React 18对应的渲染写法：

import { createRoot } from 'react-dom/client';
const root = createRoot(document.getElementById('root'));
root.render(
  <Provider store={store}>
    <App />
  </Provider>
);

• 同时检查react-redux版本，低于7.1的版本不支持Hook调用，需升级到7.1及以上版本。

2. 排查Hooks使用规则违规问题 #

这是该报错最常见的触发原因，需检查所有用到Hook的组件（App组件、所有引入的子组件、自定义Hook）是否存在以下违规操作：

• 在类组件、普通JS工具函数、事件回调函数、条件判断语句、循环语句、return语句之后调用Hook
• 未在函数组件的顶层作用域调用Hook
• 自定义Hook名称未以use开头，React无法识别为Hook函数

3. 排查多份React副本问题 #

执行命令npm ls react，如果输出结果中存在多个不同版本的React实例，说明项目依赖中存在独立安装React的第三方包，可通过以下方式解决：

• npm 8+版本可在package.json中添加overrides字段固定React版本：

{
  "overrides": {
    "react": "你的项目React版本号",
    "react-dom": "你的项目React DOM版本号"
  }
}

• Yarn可在package.json中添加resolutions字段固定版本，配置完成后删除node_modules、package-lock.json/yarn.lock文件，重新执行安装命令即可。

快速定位技巧 #

可先将App组件内的所有内容注释，仅返回空DOM节点测试，若不再报错则逐步恢复组件内容，即可快速定位到触发报错的具体代码位置。

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