在顶层使用 useContext 访问当前状态

Question

我有一个表单，其中包含一组复选框、单选按钮和一个按钮。

每次我更新复选框或单选按钮的值时，它都会调度一个事件来更新我的状态。我可以通过单击我的按钮组件来查看此状态：<Button context={ExampleContext} />

但是，我似乎无法通过添加相同的代码片段在父容器中以相同的方式访问我的状态，因为它只是 returns 未定义，这与我的 Button 中的逻辑相同组件，所以我不确定为什么它不起作用。

我显然做错了什么，但我不确定是什么。如何从父容器中访问我的 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;

如果您需要了解使用 React 上下文处理状态管理的最佳方法，请查看 this blogpost API。

在顶层使用 useContext 访问当前状态

Accessing the current state with useContext on the top level

reactjs

react-hooks

use-context