React-Redux开发Todo应用出现Invalid hook call错误如何排查

问题根因定位 #

你触发Invalid hook call报错的核心原因是项目未安装react-redux依赖，查看你提供的package.json文件，dependencies字段中没有react-redux相关条目，但你在代码中直接导入了react-redux的Provider、connect等API，依赖加载异常导致hook调用规则校验失败。

其他代码中存在的非报错类逻辑问题也同步列出：

• addTodo.js中input元素的受控绑定属性错误，你写的是input={input}，正确应为value={input}
• addTodo.js中输入事件取值错误，你写的是e.target.input，正确应为e.target.value

解决步骤 #

1. 安装适配React17版本的react-redux依赖，执行命令：

npm install react-redux@7.2.9

2. 修正addTodo.js的两处代码错误，修正后的对应代码段如下：

const inputHandler = (e) => {
  setInput(e.target.value);
};
// 中间input元素部分
<input
  type="text"
  onChange={inputHandler}
  value={input}
  placeholder="You text here"
/>

3. 删除项目本地的node_modules文件夹和package-lock.json文件后，重新执行npm install安装所有依赖，再执行npm start重启项目即可。

补充排查思路（如果按上述步骤仍未解决） #

• 检查你项目中redux/store.js的代码，确认创建store的逻辑没有在函数外部调用hook的问题
• 执行npm ls react命令检查是否存在多份React拷贝，如果输出中存在多个不同版本的React条目，可执行npm dedupe react合并依赖

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