React登录注册页报错：Invalid hook call及Cannot read properties of null

一、错误关联说明 #

这两个错误本质是同一问题的连锁反应：Invalid hook call 是核心触发点，当React无法识别合法的Hook调用环境时，useRef 会被解析为null，进而抛出Cannot read properties of null (reading 'useRef')的类型错误。

二、具体排查修复点 #

1. 严格遵守Hook调用规则 #

useRef 必须在React函数组件的顶层作用域调用，绝对不能放在循环、条件判断、嵌套函数或普通JS函数里。

• 错误写法：

function LoginPage() {
  if (isLoginMode) {
    const accountRef = useRef(null); // ❌ 条件分支内调用Hook
  }
  // ...
}

• 正确写法：

function LoginPage() {
  const accountRef = useRef(null); // ✅ 组件顶层直接调用
  if (isLoginMode) {
    // 在这里使用ref
  }
  // ...
}

2. 确保React与ReactDOM版本匹配 #

打开你的package.json，检查react和react-dom的版本号，主版本必须完全一致。比如：

{
  "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0" // ✅ 版本匹配
  }
}

如果版本不一致，执行命令修复：

npm install react@latest react-dom@latest
# 用yarn的话执行：yarn add react@latest react-dom@latest

3. 排查多React实例冲突 #

项目中如果存在多个React副本（比如依赖包自带了旧版本React），会导致Hook调用失效。执行以下命令检查：

npm ls react

如果输出显示多个不同路径的react，按以下步骤清理：

• 删除node_modules文件夹和package-lock.json/yarn.lock文件
• 重新执行npm install或yarn install

4. 确认组件渲染方式正确 #

你的登录/注册组件必须是React函数组件，且通过React官方的渲染方式挂载，不能直接当作普通函数调用。

• 错误写法：

const RegisterPage = () => { /* ... */ };
const app = RegisterPage(); // ❌ 直接调用函数，不是React渲染

• 正确写法：

const RegisterPage = () => { /* ... */ };
ReactDOM.createRoot(document.getElementById('root')).render(<RegisterPage />); // ✅ 合法渲染

5. 检查React版本是否支持Hook #

Hook是React 16.8.0及以上版本才支持的特性，确认package.json中react版本≥16.8.0。

三、额外调试建议 #

如果以上步骤都没解决问题，建议：

• 逐行对比你的代码和教程代码，重点看useRef的位置、组件结构、导入语句的差异
• 先写一个极简的测试组件，验证useRef能否正常工作，再逐步添加登录注册的逻辑

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