React调用Hook报Invalid hook call错误如何排查解决

报错信息 #

Uncaught Error: Invalid hook call. Hooks can only be called inside of the body of a function component
触发该错误通常为三类原因：

1. React 与渲染器（如 React DOM）版本不匹配
2. 代码编写违反 Hooks 调用规则
3. 同一应用内存在多份 React 副本

问题相关业务代码 #

import React from 'react';
import { useSelector } from 'react-redux';

import 'bootstrap/dist/css/bootstrap.min.css';

const ProfileEditing = ({
}) => {

    const user = useSelector(state => state.auth);
    console.log(user);

    return (
        <section className="dashboard">
            <div className='side'>
                <h1 className="large text-primary">Dashboard</h1>
                <p className="lead">
            </div>
        </section>
    );
};

export default ProfileEditing;

分步排查解决 #

• 版本匹配检查
  执行以下命令查看本地依赖版本：
  npm ls react react-dom react-redux
  确保react、react-dom大版本完全一致，同时react-redux版本和当前React版本适配（React18需搭配react-redux@8.x及以上版本，React17需搭配react-redux@7.x版本）。版本不匹配时直接重新安装对应版本的包对齐即可。
• Hooks 规则合规检查
  你贴出的组件中useSelector写在函数组件顶层，本身写法符合规则，需要额外排查两个高频触发场景：
  1. 组件使用时是否写成了直接函数调用，比如写了{ProfileEditing()}而非JSX标签形式<ProfileEditing />，直接调用函数会导致Hook执行上下文丢失，直接触发该错误
  2. 修复现有代码的语法问题：当前JSX中<p className="lead">标签未闭合，缺少对应的</p>，语法解析异常也可能导致编译后组件上下文识别错误
• 多副本React问题排查
  第三方依赖和本地项目React版本不一致时，会导致应用内加载多份React实例触发报错，按以下方式修复：
  1. 执行npm ls react查看依赖树，确认是否存在多个不同版本的React包，如果存在可通过升级/降级对应依赖版本对齐
  2. Webpack构建场景，在配置文件中添加别名，强制全局引用同一份React实例：

  const path = require('path')
  module.exports = {
    // 其他配置
    resolve: {
      alias: {
        react: path.resolve(__dirname, 'node_modules/react')
      }
    }
  }
  

  3. Vite构建场景，在vite.config.js中添加别名配置：

  import path from 'path'
  import { defineConfig } from 'vite'
  export default defineConfig({
    // 其他配置
    resolve: {
      alias: {
        react: path.resolve(__dirname, 'node_modules/react')
      }
    }
  })
  

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