Доступ к текущему состоянию с помощью useContext на верхнем уровне

Question

У меня есть форма с группой флажков, переключателей и кнопок.

Каждый раз, когда я обновляю значение флажка или переключателя, оно отправляет событие, которое обновляет мое состояние. Я могу увидеть это состояние, щелкнув компонент моей кнопки: <Button context={ExampleContext} />

Однако я не могу получить доступ к своему состоянию таким же образом в родительском контейнере, добавив те же фрагменты кода, которые просто возвращают undefined, это тот же лог c, что и внутри моего компонента Button, поэтому я не уверен, почему он не работает.

Я явно что-то делаю не так, но я не уверен, что именно. Как мне go получить доступ к моему state из родительского контейнера?

У меня также есть рабочий пример: https://codesandbox.io/s/elegant-minsky-0i4yx

Спасибо за любые помогите!

// This doesn't seem to work
const { state } = useContext(ExampleContext);
<button onClick={() => console.log(state)}>See State</button>

import React from "react";
import Checkbox from "./Checkbox";
import Radio from "./Radio";
import Button from "./Button";
import { ExampleProvider, ExampleContext } from "./ExampleContext";

const { useContext } = React;

const Form = () => {
  const { state } = useContext(ExampleContext);

  return (
    <ExampleProvider>
      <Checkbox context={ExampleContext} />
      <Radio context={ExampleContext} />
      <Button context={ExampleContext} />
      <button onClick={() => console.log(state)}>See State</button>
    </ExampleProvider>
  );
};
export default Form;

Answer 1

Ваш useContext хук не входит в контекстный провайдер ExampleProvider.

Вы можете исправить это следующим образом

const Form = () => {
  const { state } = useContext(ExampleContext);

  return (
    <>
      <Checkbox context={ExampleContext} />
      <Radio context={ExampleContext} />
      <Button context={ExampleContext} />
      <button onClick={() => console.log(state)}>See State</button>
    </>
  );
};

const FormWrapper = () => {
  return (
    <ExampleProvider>
      <Form />
    </ExampleProvider>
  );
};

export default FormWrapper;

Посмотрите на этот пост , если вам нужно узнать о наилучшем способе управления состоянием с помощью контекстного API React.