Question

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

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

看到此状态

但是，我似乎无法通过添加相同的代码片段（返回未定义）在父容器中以相同的方式访问状态，这与我在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上下文API处理状态管理的最佳方法，请查看this blogpost。

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

1 个答案: