使用react-cookies结合React Hooks时出现无效Hook调用警告的问题

问题分析 #

你遇到的Invalid hook call警告，虽然代码中useCookies是在函数组件顶层调用（符合钩子规则），且React和React DOM版本一致，但问题大概率出在react-cookie与React 18的版本兼容性，或是依赖安装过程中出现的重复React副本问题。

解决方案 #

1. 确保react-cookie版本适配React 18 #

React 18使用了新的根渲染API（createRoot），旧版本的react-cookie可能不兼容。执行以下命令查看当前react-cookie版本：

npm list react-cookie

如果版本低于v4.x，升级到最新兼容版本：

npm install react-cookie@latest

2. 清理依赖并重新安装 #

有时依赖缓存或锁文件会导致重复的React副本，执行以下步骤：

1. 删除node_modules目录和package-lock.json文件
2. 清除npm缓存：

npm cache clean --force

3. 重新安装所有依赖：

npm install

3. 验证CookiesProvider的包裹范围 #

确认你的App组件确实被CookiesProvider完整包裹（你的index.tsx代码已经满足这一点，但可以再次检查是否有嵌套错误）。

4. 强制统一React版本 #

如果依赖树中存在隐性版本不一致，可在package.json中添加版本锁定规则：

"resolutions": {
  "react": "18.2.0",
  "react-dom": "18.2.0"
}

添加后重新执行npm install，确保所有依赖使用统一的React版本。

验证 #

完成上述步骤后，重新启动项目，取消const [cookies, setCookie] = useCookies(['bid']);的注释，检查警告是否消失。

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