使用Nav标签时触发React无效Hook调用错误是什么原因？

问题根因 #

你自己写的Navbar函数组件没有主动调用Hook，但styled-components创建的Nav组件内部依赖React Hook实现样式逻辑，因此使用Nav时相当于间接触发了Hook调用，才会抛出该错误。你把组件放在App的render()方法里的写法是正确的，报错出现在setState行只是因为setState触发了App重渲染，首次挂载Navbar组件才触发了Hook调用，和setState本身无关。

解决步骤 #

• 第一步：核查版本兼容性
  执行命令npm list react react-dom styled-components查看三个依赖的版本：
  • 若使用styled-components v6.x，要求react/react-dom版本必须 >= 18.0.0。如果你的React版本低于18，可以选择升级React到18，或者降级styled-components到兼容旧版本的v5.3.11，执行命令：npm i styled-components@5.3.11
  • 若版本匹配，查看命令输出中是否存在多个不同版本的react/react-dom条目，如果存在多份React副本，执行npm dedupe合并重复依赖，或者删除项目的node_modules文件夹和package-lock.json文件后重新执行npm install
• 第二步：核查依赖安装位置
  确认styled-components是安装在项目根目录的package.json的dependencies配置中，没有在子文件夹单独安装过该包，避免它引用独立的React副本。

额外提示 #

你NavbarElements.js中的CSS属性拼写有误：trasition应该改为transition，否则响应式切换时的过渡动画不会生效。

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