为何无法用useContext从Component2获取状态？渲染Component1结果为undefined

你的代码出现undefined的原因很明确：

• 你直接通过root.render(<Component1 />)渲染了Component1，但它完全不在TestContext.Provider的包裹范围内，useContext只能拿到createContext()的默认值（你没传默认值，所以是undefined）。
• 持有状态并提供Provider的Component2根本没被渲染，所以它的状态传递逻辑完全没生效。

要实现从Component2获取状态到Component1且满足Component1作为渲染入口的要求，核心是让Component1的状态消费部分处于Component2的Provider子树中。

import { useState, createContext, useContext } from "react";
import ReactDOM from "react-dom/client";

const TestContext = createContext();

function Component1() {
  // 定义Component1内部的状态消费组件
  const ContextConsumer = () => {
    const test = useContext(TestContext);
    return <h1>{test}</h1>;
  };

  // Component1作为入口，渲染Component2并传递消费组件
  return (
    <Component2>
      <ContextConsumer />
    </Component2>
  );
}

function Component2({ children }) {
  const [test, setTest] = useState("From Component 2");

  // 用Provider包裹子组件，传递状态
  return (
    <TestContext.Provider value={test}>
      {children}
    </TestContext.Provider>
  );
}

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<Component1 />);

• 让Component1作为入口渲染Component2，并将需要消费状态的部分以子组件形式传给Component2。
• Component2通过children接收子组件，并用TestContext.Provider包裹，确保子组件处于Context的作用域内。
• 状态消费逻辑放在Component1的内部组件中，既满足Component1作为主组件的要求，又能正确获取Component2的状态。

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