React报错Invalid Hook Call无效Hook调用原因排查及代码示例

代码逻辑错误优先修复 #

你当前贴出的userSlice.js存在两处明显错误，先修复这两个问题再排查其他可能性：

• reducer逻辑错误：login方法中赋值字段错误，你的初始state结构为{user: null}，但login里写的是state.value = action.payload，需要修改为state.user = action.payload，否则selectUser选择器永远返回null
• action导出错误：你定义的reducer方法为login和logout，但导出的action是模板残留的increment, decrement, incrementByAmount，需要将导出语句修改为export const { login, logout } = userSlice.actions;，否则调用登录相关逻辑时会抛出异常，可能间接触发Hook调用错误

按通用报错原因逐一排查 #

1. React与渲染器版本不匹配 #

在项目根目录执行命令npm ls react react-dom，查看两个包的版本号是否一致。如果版本不一致，执行npm install react@latest react-dom@latest安装匹配的版本即可。

2. 违反Hook使用规则 #

检查项目中所有组件的Hook调用逻辑，确认符合以下要求：

• 所有Hook都在函数组件的顶层调用，不能放在条件判断、循环、嵌套函数内部
• Hook只能在React函数组件或者自定义Hook中调用，不能在普通JavaScript函数中调用
  你当前App组件中的useSelector调用符合规则，需要逐一排查Header、Sidebar、Feed、Login四个组件的Hook使用逻辑是否符合要求。

3. 项目存在多份React副本 #

在项目根目录执行命令npm ls react，如果输出结果中出现多个不同版本的React实例，按以下步骤处理：

• 删除项目中的node_modules文件夹和package-lock.json（使用yarn的话删除yarn.lock）
• 重新执行npm install（或yarn install）安装依赖
  如果你在项目中使用了本地链接的自定义npm包，需要将包打包配置中的React设置为外部依赖，避免重复打包React。

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