React点击事件调用含useState的Context组件报错，求登录状态管理方案

错误原因 #

你触发的Invalid hook call错误，本质是违反了React Hook的核心规则：Hook只能在React组件的顶层调用。你把内部包含useState的SigninWithGoogleProvider组件绑定到按钮onClick事件，点击时才会渲染这个组件，相当于在事件回调函数里调用了Hook，完全不符合Hook的使用规范。

可行解决方案 #

核心思路是：将全局登录状态的管理与Provider组件解耦，Provider只负责包裹需要共享状态的组件树，登录逻辑封装成Context提供的方法，组件通过自定义Hook获取方法并绑定到事件。

1. 重构loginStoreContext.js

把状态管理、登录逻辑封装到Provider中，提供可调用的登录方法：

// loginStoreContext.js
import { createContext, useContext, useState, useCallback } from 'react';

// 创建Context
const LoginStoreContext = createContext();

// 全局状态Provider组件
export function LoginStoreProvider({ children }) {
  // 全局存储登录用户信息
  const [authUser, setAuthUser] = useState(null);

  // 封装谷歌登录逻辑
  const signInWithGoogle = useCallback(async () => {
    try {
      // 替换为你的实际谷歌登录逻辑（比如调用Firebase Auth、后端接口等）
      const response = await fetch('/api/auth/google', { method: 'POST' });
      const user = await response.json();
      setAuthUser(user);
    } catch (error) {
      console.error('谷歌登录失败:', error);
      // 这里可以添加错误提示逻辑
    }
  }, []);

  // 可选：封装登出逻辑
  const signOut = useCallback(() => {
    setAuthUser(null);
    // 替换为你的实际登出逻辑
    fetch('/api/auth/logout', { method: 'POST' });
  }, []);

  // 向子组件暴露状态和方法
  return (
    <LoginStoreContext.Provider value={{ authUser, signInWithGoogle, signOut }}>
      {children}
    </LoginStoreContext.Provider>
  );
}

// 自定义Hook，简化Context的使用
export function useLoginStore() {
  const context = useContext(LoginStoreContext);
  if (!context) {
    throw new Error('useLoginStore必须在LoginStoreProvider内部使用');
  }
  return context;
}

2. 修改Login.js组件

通过自定义Hook获取登录方法，绑定到按钮点击事件：

// Login.js
import { useLoginStore } from './loginStoreContext';

export default function Login() {
  const { signInWithGoogle, authUser } = useLoginStore();

  // 如果已登录，直接显示登录状态或跳转
  if (authUser) {
    return <div>已登录，欢迎{authUser.nickname}</div>;
  }

  return (
    <div className="login-container">
      <h3>账号登录</h3>
      {/* 可选：添加普通账号密码表单 */}
      <button onClick={signInWithGoogle} className="google-login-btn">
        使用谷歌账号登录
      </button>
    </div>
  );
}

3. 在应用入口包裹Provider

确保所有需要访问登录状态的组件都在Provider的作用域内：

// App.js 或 main.jsx
import { LoginStoreProvider } from './loginStoreContext';
import { Routes, Route } from 'react-router-dom';
import Login from './Login';
import Dashboard from './Dashboard';

function App() {
  return (
    <LoginStoreProvider>
      <Routes>
        <Route path="/login" element={<Login />} />
        <Route path="/dashboard" element={<Dashboard />} />
        {/* 其他需要访问登录状态的路由 */}
      </Routes>
    </LoginStoreProvider>
  );
}

export default App;

关键注意事项 #

• 永远不要在事件回调、循环、条件判断中调用Hook或渲染包含Hook的组件，必须保持在组件顶层
• Provider组件的作用是共享状态给子组件树，不是作为事件处理函数调用
• 自定义HookuseLoginStore可以确保所有组件都能安全地获取登录状态和方法

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