React UseContext问题：Login组件数据无法传递至SideBar组件

问题描述 #

登录组件验证通过后，调用setCurrentUser更新Context状态，但Dashboard的Sidebar组件始终获取到currentUser: null，无法显示用户名。

核心原因 #

• 页面刷新清空Context状态：Login组件中使用window.location.replace('/dashboard')跳转，整页刷新会重置React Context的内存状态为初始值null。
• setState异步特性误解：setCurrentUser后立即console.log(currentUser)打印旧值，因为setState是异步操作，但这不是Sidebar不更新的直接原因。

修复步骤 #

1. 替换路由跳转方式，避免页面刷新 #

使用React Router的useNavigate钩子替代window.location，保证单页应用状态不丢失：

// login.component.jsx
import { useState, useContext } from "react";
import { UserContext } from '../../contexts/user.context';
import { useNavigate } from 'react-router-dom'; // 导入导航钩子

const Login = () => {
  const { setCurrentUser } = useContext(UserContext);
  const navigate = useNavigate(); // 初始化导航实例

  const [formFields, setFormFields] = useState(defaultFormFields);
  const { usuario, password } = formFields;
  const [validCredentials, setValidCredentials] = useState(true);

  const handleSubmit = async (event) => {
    event.preventDefault();
    const usuariValid = usuarios.find(u => 
      u.usuario === usuario && u.contraseña === password
    );
    
    if (usuariValid) {
      setCurrentUser(usuariValid);
      navigate('/dashboard'); // 用单页路由跳转
    } else {
      resetFormFields();
      setValidCredentials(false);
      console.info("Credenciales invalidas");
    }
  };

  // 其他代码...
};

2. 确保Sidebar正确订阅Context #

修正Sidebar组件的语法错误，保证正确监听Context状态变化：

// sidebar.component.jsx
import { UserContext } from '../../../contexts/user.context'
import React, { useState, useEffect, useContext } from 'react'

const Sidebar = () => {
  const { currentUser } = useContext(UserContext);
  const [idAsignaturas, setIdAsignaturas] = useState([]);
  const [nombreAsignaturas, setNombreAsignaturas] = useState([]);

  // 监听currentUser变化
  useEffect(() => {
    console.log('当前用户:', currentUser);
  }, [currentUser]);

  // 渲染用户名
  return (
    <div className="sidebar">
      {currentUser && <div className="sidebar-user">欢迎，{currentUser.usuario}</div>}
      {/* 其他侧边栏内容 */}
    </div>
  );
};

export default Sidebar;

3. 确认Context Provider层级正确 #

确保UserProvider包裹整个应用（你的index.js已正确配置）：

// index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import { BrowserRouter } from 'react-router-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import { UserProvider } from './contexts/user.context';

const root = ReactDOM.createRoot(document.getElementById('root'));

root.render(  
  <React.StrictMode>
    <BrowserRouter>
      <UserProvider>
        <App />
      </UserProvider>
    </BrowserRouter>  
  </React.StrictMode>
);
reportWebVitals();

关键提示 #

• React Context状态存储在内存中，页面刷新会清空所有内存状态，必须使用单页路由跳转方式。
• setState是异步操作，更新后无法立即获取新值，如需在状态变化后执行逻辑，使用useEffect监听状态。

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