为什么反应上下文中没有显示该值？答案

【问题标题】：Why is the value not shown in react context?为什么反应上下文中没有显示该值？
【发布时间】：2021-04-19 16:27:45
【问题描述】：

不确定为什么 react 上下文不使用提供程序中传递的值？

import { createContext } from "react";

const initialState = {
  isOpen: false
};

export const alertContext = createContext(initialState);

export default (props) => {
  return (
    <>
      <alertContext.Provider value={{ isOpen: true }}>
        {props.children}
      </alertContext.Provider>
    </>
  );
};

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

export default function App() {
  let value = useContext(alertContext);
  return (
    <div className="App">
      <AlertProvider>
        <pre>{JSON.stringify(value)}</pre>
      </AlertProvider>
    </div>
  );
}

为什么 isOpen 的值不正确？ https://codesandbox.io/s/serene-faraday-1oib3?fontsize=14&hidenavigation=1&theme=dark

【问题讨论】：

标签： reactjs react-context

【解决方案1】：

您需要在 index.js 中将您的提供程序包装在 App 周围

如图：

import { StrictMode } from "react";
import ReactDOM from "react-dom";
import AlertProvider from "./AlertProvider";

import App from "./App";

    const rootElement = document.getElementById("root");
    ReactDOM.render(
      <StrictMode>
        <AlertProvider>
        <App />
        </AlertProvider>
      </StrictMode>,
      rootElement
    );

您的 app.js 将如下所示：

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

export default function App() {
  let value = useContext(alertContext);
  return (
    <div className="App">
      
        <pre>{JSON.stringify(value)}</pre>
     
    </div>
  );
}

【讨论】：