useContext主上下文状态undefined问题咨询及代码排查

你的核心问题是需要获取上下文的App组件不在UserContext.Provider的包裹范围内——当组件不在Provider层级下时，useContext会返回createContext的默认值（你没传默认值，所以得到undefined）。

下面是具体的修正方案和代码调整：

1. 重构上下文提供者组件 #

让Contexto组件专注于提供上下文，通过children插槽接收需要共享上下文的组件，而不是直接固定渲染内部元素：

import { useState, createContext } from "react";

export const UserContext = createContext();

function Contexto({ children }) {
    const [user, setUser] = useState("Jesse Hall");
    return (
      <UserContext.Provider value={user}>
        {children}
      </UserContext.Provider>
    );
}

export default Contexto

2. 简化RecebeContexto组件 #

移除不必要的Contexto导入，专注通过useContext获取状态：

import React, { useContext } from "react";
import { UserContext } from "../contexto/Contexto";

function RecebeContexto() {
    const user = useContext(UserContext);
    return (
      <>
        <h1>Component 5</h1>
        <h2>{`Hello ${user} again!`}</h2>
      </>
    );
}

export default RecebeContexto

3. 在根层级包裹App组件 #

确保App和所有需要上下文的组件都被Contexto包裹，这样才能正确获取状态：

import { useContext } from "react";
import Contexto from "./contexto/Contexto";
import { UserContext } from "./contexto/Contexto";
import RecebeContexto from "./components/RecebeContexto";

function App() {
  const user = useContext(UserContext);
  return (
    <div className="App">
      <h1>{`Hello ${user} from App!`}</h1>
      <RecebeContexto />
    </div>
  );
}

// 用Contexto包裹App，让整个应用都能访问上下文状态
function Root() {
  return (
    <Contexto>
      <App />
    </Contexto>
  );
}

export default Root;

额外说明 #

你之前的写法里，Contexto组件直接渲染RecebeContexto并通过props传值，这其实没发挥上下文“跨层级共享状态”的作用——上下文的核心价值就是避免逐层传递props，现在的调整才是它的正确用法。

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