Reactjs 使用顶级useContext访问当前状态

我有一个表单，它有一组复选框、单选按钮和一个按钮

每次我更新复选框或单选按钮的值时，它都会发送一个事件来更新我的状态。我可以通过单击我的按钮组件查看此状态：

然而，我似乎无法通过添加相同的代码段来访问父容器中的状态，因为它只返回未定义的，这与我在Button组件中的逻辑相同，所以我不确定为什么它不工作

我显然做错了什么，但我不知道是什么。如何从父容器中访问我的

状态

我这里还有一个工作示例：

谢谢你的帮助

//这似乎不起作用
const{state}=useContext（ExampleContext）；
console.log（state）}>参见state

从“React”导入React；
从“/Checkbox”导入复选框；
从“/Radio”导入收音机；
从“/”按钮导入按钮；
从“/ExampleContext”导入{ExampleProvider，ExampleContext}；
const{useContext}=React；
常数形式=（）=>{
const{state}=useContext（ExampleContext）；
返回(
console.log（state）}>参见state
);
};
导出默认表单；

您的

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;

const Form=（）=>{
const{state}=useContext（ExampleContext）；
返回(
console.log（state）}>参见state
);
};
常量FormWrapper=（）=>{
返回(
);
};
导出默认FormWrapper；

---

如果您需要了解使用React-context API处理状态管理的最佳方法，请查看。

太好了！没想到我离得太远了！谢谢：）