Реагирующее значение useContext не передается от провайдера?

Question

Я пытаюсь передать значение, используя useContext, как показано ниже

Это контекст. js

export const selectedContext = React.createContext();

export const SelectProvider = () => {
  return (
    <selectedContext.Provider value={"Team One"}>
      <Cards />
      <Pies />
    </selectedContext.Provider>
  );
};

Я вызываю контекст в одном из такие компоненты как

Это в Card. js (дочерний элемент в провайдере)

const value = React.useContext(selectedContext);
console.log(value);

Когда я инициализирую значение из React.createContext, значение передается моему компонент, но когда я пытаюсь использовать поставщика, он не работает.

Что я делаю не так?

Answer 1

Ваш код в порядке, но вы должны «вызвать контекст» в дочернем компоненте провайдера, так как value доступно в дочерних элементах Provider:

export const SelectedContext = React.createContext();

export const SelectProvider = ({ children }) => {
  return (
    <SelectedContext.Provider value={'Team One'}>
      {children}
    </SelectedContext.Provider>
  );
};

const ProviderChecker = () => {
  const value = React.useContext(SelectedContext);
  return <div>{value}</div>;
};

const App = () => {
  return (
    <SelectProvider>
      <ProviderChecker />
    </SelectProvider>
  );
};