如何从 function React 组件的 DOM 回调中访问上下文和组件 state？

Question

我似乎无法从功能性 React 组件的 DOM 回调内部访问上下文 state 或组件 state。 我在尝试发送 state 更新以响应文档按键时发现了问题。

此处演示问题的最小代码沙箱。 它是一个非常基本的 reducer/context context.Provider object 包装一个 child/useContext 组件来访问 context state。

孩子实现一个计时器和一个按键回调。 它还会增加使用 setState() 设置的本地计数器。

要进行测试，请打开控制台并查看计时器递增上下文和本地组件计数器。 按任意键观察回调引用传递给 context.Provider 组件的初始 state 和 setState() 的初始值；

State 更新无法从 DOM 组件中访问。

我总是感谢给出的任何建议。谢谢

Answer 1

使用 refs 对上下文 state 和组件 state 一样有效。一个小的反馈循环重新分配 ref.current 组件 state 的每次更新都会产生预期的效果。

看这里

这是模组……我从最初的例子中取出定时器来简化代码。

  useEffect(() => {
    console.log("context state", JSON.stringify(context.state, null, 2));
    stateRef.current = context.state;
  }, [context.state]);

  useEffect(() => {
    document.onkeypress = function (e) {
      console.log(
        "actual value:", context.state,
        "ref value:", stateRef.current);
      context.dispatch({ type: "KEYPRESS", payload: e.key });
    };
  }, []);