React全局Context无法更新问题求助

问题核心成因及修复方案： #

1. 状态更新异步导致即时打印无最新值

React的useState更新是异步批量处理的，调用setUserName("test")后，contextUsername不会立刻同步更新。你当前代码中调用setUserName后立即console.log，拿到的始终是更新前的旧值（初始为null）。

修复方式：通过useEffect监听状态变化，获取更新后的值：

import React, { useContext, useEffect } from 'react';
// ...其他导入

const Landing = () =>{
    const { contextUsername, setUserName } = useContext(UserContext);
    
    // 监听contextUsername变化，打印最新值
    useEffect(() => {
        console.log("更新后的用户名：", contextUsername);
    }, [contextUsername]);

    // ...其他代码
}

2. 按钮事件绑定拼写错误

你的按钮写的是onLick={onExit}，属于拼写错误，正确的事件名应为onClick，否则点击按钮不会触发onExit函数，setUserName自然不会执行。

修复后的按钮代码：

<button onClick={onExit}>退出</button>

3. navigate未初始化

Landing组件中使用了navigate，但未通过useNavigate()钩子获取实例，会直接报错中断代码执行，导致setUserName的逻辑无法正常完成。

修复方式：在组件内初始化navigate：

const Landing = () =>{
    const { contextUsername, setUserName } = useContext(UserContext);
    const navigate = useNavigate(); // 新增这行初始化代码

    // ...其他代码
}

修改后的完整Landing组件代码 #

import React, { useContext, useEffect } from 'react';
import { useNavigate } from "react-router-dom";
import { UserContext } from './UserContext';

const Landing = () =>{
    const { contextUsername, setUserName } = useContext(UserContext);
    const navigate = useNavigate();

    useEffect(() => {
        console.log("当前用户名：", contextUsername);
    }, [contextUsername]);

    const onExit = () =>{
        setUserName("test");
        navigate('/');
    }

    return(
        <div> 
           <button onClick={onExit}>退出</button>
        </div>
    )
}

export default Landing;

额外确认 #

你的index.js中已用UserContextProvider正确包裹App组件，确保所有子路由组件（包括Landing）都在Context作用域内，这部分代码无需修改。

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