如何解决React中的Uncaught Error: Invalid hook call错误？

错误信息 #

Uncaught Error: Invalid hook call. Hooks can only be called inside of the body of a function component.

排查方向与解决步骤 #

1. 定位问题组件 #

你的Passengerpage组件本身的hooks调用符合规范（useContext、useState均在函数组件顶层），错误大概率出在子组件上：

• 先注释掉代码中的<Addride />，重新运行项目，观察错误是否消失。如果消失，说明Addride组件存在hooks误用问题。
• 再替换<ReactSearchBox>为原生<input>组件，测试是否仍有错误，以此确认是否是ReactSearchBox组件的问题。

2. 检查子组件的hooks使用规范 #

如果定位到是某个子组件的问题，检查它的代码：

• 确保子组件是函数组件，且hooks（如useState、useEffect等）都调用在组件的顶层作用域，不能放在循环、条件判断、嵌套函数中。
• 如果是类组件，绝对不能在里面使用hooks。

3. 确认React版本兼容性 #

• 确保项目中react和react-dom的版本一致，且均为16.8.0及以上（hooks的最低支持版本）。
• 运行以下命令查看版本：

  npm list react react-dom
  

  若版本不一致或过低，执行npm install react@latest react-dom@latest更新到最新兼容版本。

4. 排查重复React实例问题 #

如果你的项目存在多个React副本（比如npm包中自带了React），会导致hooks调用异常：

• 在Passengerpage组件和问题子组件中分别添加console.log(React)，对比输出的实例是否一致。
• 若不一致，可通过在项目根目录添加resolve.alias配置（webpack或vite）强制所有模块使用同一React实例：
  • Webpack配置示例：

    resolve: {
      alias: {
        'react': path.resolve(__dirname, 'node_modules/react'),
        'react-dom': path.resolve(__dirname, 'node_modules/react-dom')
      }
    }
    

  • Vite配置示例：

    export default defineConfig({
      resolve: {
        alias: {
          'react': path.resolve(__dirname, 'node_modules/react'),
          'react-dom': path.resolve(__dirname, 'node_modules/react-dom')
        }
      }
    })
    

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