React Context使用异常：无法解构取值及调用setUser函数求助

问题核心是变量名不匹配：你在Context Provider中传递的状态和修改函数名称，与调用时解构使用的名称不一致。

问题分析 #

在你的Context.jsx里，Provider的value传递的是{usuario, setUsuario}，但你调用时试图解构user和setUser——这两个名称在Context的value里根本不存在，所以会返回undefined。你自己写的setUser=Usuario.setUser同样错误，因为Context里的修改函数名叫setUsuario，不是setUser。

两种修正方案 #

方案1：保持Context原有命名，修正调用代码

直接使用Context中定义的属性名解构：

// 调用Context的正确代码
import { useContext } from 'react';
import { Contexto } from './Context.jsx';

// ... 组件内部
const { usuario, setUsuario } = useContext(Contexto);

// 正常访问状态
alert(usuario.nome);

// 正常调用修改函数
setUsuario({ nome: '你的名字', logado: true });

方案2：修改Context变量名，对齐课程写法

如果你想和课程里的user/setUser保持一致，修改Context.jsx中的状态命名：

// Context.jsx 修改后
import { useState, createContext } from "react";

export const Contexto = createContext([]);

export default function ContextoGlobal(props){
    // 将usuario改为user，setUsuario改为setUser
    const [user, setUser] = useState({
        nome:"",
        logado:false
    });

    return(
        <Contexto.Provider value={{user, setUser}}>
            {props.children}
        </Contexto.Provider>
    );
}

此时调用代码就可以和课程一致：

const { user, setUser } = useContext(Contexto);
alert(user.nome);
setUser({ nome: '你的名字', logado: true });

额外提示 #

• 注意Context的默认值createContext([])用了数组，但实际传递的是对象，虽然不影响功能，但建议默认值和实际值类型统一，比如改成createContext({ usuario: {}, setUsuario: () => {} })，避免类型提示错误。
• 确保组件在ContextoGlobal的包裹范围内，否则useContext会返回默认值。

内容的提问来源于stack exchange，提问作者João