React函数组件Hook调用无效报错求助（无终端编译错误）

1. 校验React与渲染器版本匹配度 #

• 查看项目中react、react-dom的版本，在项目根目录执行：

  npm list react react-dom
  

• 确保两者版本完全一致，若存在差异，执行命令统一版本（以安装最新稳定版为例）：

  npm install react@latest react-dom@latest
  

• 同步确认react-router-dom版本与React兼容，比如React 18需搭配react-router-dom v6+，版本不兼容时执行：

  npm install react-router-dom@latest
  

2. 严格遵循Hook使用规则 #

• 所有Hook（如useState、useEffect、useNavigate）必须在React函数组件的顶层调用，禁止在循环、条件判断、嵌套函数或普通JS函数内使用。
  错误示例：

  function Navbar() {
    if (isLoggedIn) {
      const [user, setUser] = useState(null); // 违规：Hook在条件分支内调用
    }
    // ...
  }
  

  正确示例：

  function Navbar() {
    const [user, setUser] = useState(null);
    if (isLoggedIn) {
      // 业务逻辑处理
    }
    // ...
  }
  

• 自定义Hook必须以use开头，且内部仅调用合法React Hook，避免将普通函数误作Hook使用。
• 类组件中禁止使用Hook，需改用生命周期方法实现对应逻辑。

3. 排查并清理多份React副本 #

• 执行命令检查项目内是否存在多份React实例：

  npm ls react
  

  若输出显示多个不同路径的react包，说明存在多份副本。
• 若项目包含npm link的本地依赖库，需让依赖库复用项目根目录的React，在依赖库目录执行：

  npm link ../your-project/node_modules/react
  

• 删除node_modules和锁文件后重新安装依赖：

  rm -rf node_modules package-lock.json
  npm install
  

• 检查package.json，删除重复的react依赖项后重新安装。

内容的提问来源于stack exchange，提问作者K Srikanth Varma