为何React Context中Provider传入的isOpen值未正常展示？

你获取不到Provider传入值的核心原因是：useContext 的调用位置处于 AlertProvider 的作用域之外。

React Context 的取值规则是：当组件调用 useContext(AlertContext) 时，React 会从当前调用该Hook的组件位置开始，向上逐层遍历组件树，查找距离最近的匹配Context的Provider；如果遍历全程没有找到对应Provider，就会返回 createContext 时定义的初始默认值。

对应你的代码执行流程：

• App组件渲染时，最先执行的就是组件顶层的 let value = useContext(alertContext)，此时你代码中传入了{isOpen: true}的Provider还没有被渲染——这个Provider只是App返回JSX中的子节点，属于App的下属层级。
• 这次useContext取值时，向上遍历根本找不到目标Provider，因此直接返回了最开始定义的初始值{isOpen: false}，完全不会读取到Provider内部传入的真实值。

只需要把useContext的调用逻辑，移动到被AlertProvider包裹的组件内部即可，示例代码如下：

import "./styles.css";
import { useContext } from "react";
import AlertProvider, { alertContext } from "./AlertProvider";

// 定义专门的子组件消费Context
function ContextContent() {
  const value = useContext(alertContext);
  return <pre>{JSON.stringify(value)}</pre>;
}

export default function App() {
  return (
    <div className="App">
      {/* 所有需要消费Context值的组件，都要放在Provider的包裹范围内 */}
      <AlertProvider>
        <ContextContent />
      </AlertProvider>
    </div>
  );
}

这种写法下，ContextContent是被AlertProvider直接包裹的子组件，当它内部调用useContext时，向上查找一层就能命中传值的Provider，自然就能拿到正确的{isOpen: true}。

常见误区：很多开发者会误以为只要在同组件的返回JSX里包含Provider，组件自身顶层的useContext就能读到Provider的值，但实际上Context是严格按照组件嵌套层级传递的，Provider仅能给它的所有下属子组件提供值，无法给父组件、同层级兄弟组件提供值。

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