Почему я не могу использовать MyContext в компоненте приложения?

#javascript #reactjs

#javascript #reactjs

Вопрос:

 import React, { useContext } from "react";
import { ContextProvider, MyContext } from "./Context/MyContext";
import "./styles.css";

export default function App() {
  const value = useContext(MyContext);
  console.log(value);
  return (
    <ContextProvider>
      <div className="App">{value}</div>
    </ContextProvider>
  );
}
  

Если я хочу использовать useContext точно в компоненте приложения. Я получаю значение как неопределенное для компонента приложения, но значение всех остальных компонентов в порядке. Итак, я хочу знать, каков механизм, стоящий за этим. Почему я не могу получить доступ к useContext в компоненте приложения.

Комментарии:

1. Вам нужно получить доступ к контексту во вложенном компоненте. Что-то, что является дочерним элементом поставщика. Здесь вы делаете это внутри App , который является прямым родителем поставщика. Вам нужно будет обернуть App ContextProvider в, чтобы получить доступ к контексту внутри него

Ответ №1:

ContextProvider предоставляет значения в вашем контексте всем своим дочерним компонентам. Значение, которое вы предоставляете своему <div>, поступает из родительского компонента ContextProvider в вашем случае, то есть из приложения. На данный момент ваш провайдер все еще не настроен, вам нужно обернуть приложение внутри провайдера, чтобы получить доступ к значениям контекста. Другими словами, поставщик должен быть родительским приложением, чтобы предоставлять ему значения, а не наоборот