为什么该值未显示在反应上下文中？

Question

不确定为什么 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

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

为什么该值未显示在反应上下文中？

Why is the value not shown in react context?

reactjs

react-context