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

Question

不确定为什么反应上下文不使用提供者中传递的值？

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

Answer 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>
  );
}