Reactjs 在React.js useffect钩子中创建的事件处理程序的访问状态

在我的组件中，我正在

useffect

hook中设置一个事件侦听器：

useEffect(() => {
  const target = subtitleEl.current;
  target.addEventListener("click", () => {
    console.log("click");
    onSubtitleClick();
  });

  return () => {
    target.removeEventListener("click", null);
  };
}, []);

---

。。但是当我在SubtitleClick上调用

时，我的状态是陈旧的-它是原始值。如何从使用useEffect设置的事件处理程序访问状态？
您的事件侦听器在定义的环境中注册一个函数（引用），该函数的
计数为0，并且在发生新渲染时，您的引用未被更新，该引用已向该元素注册，并且该已注册函数引用仍然知道count为0，即使count已更改，但该已更新函数未注册，它知道其上下文中的更新值。因此，您需要使用新的函数引用更新事件侦听器

useEffect(() => {
    const target = subtitleEl.current;
    target.addEventListener("click", onSubtitleClick);

    return () => {
      console.log("removeEventListener");
      target.removeEventListener("click", onSubtitleClick);
    };
}, [onSubtitleClick]);

然而，你不需要那些乱七八糟的代码来实现你现在正在做的事情或类似的事情。您只需在单击时调用传递的函数，而不用通过ref直接在jsx中附加到元素

<div
    className="panelText"
    style={{ fontSize: "13px" }}
    onClick={onSubtitleClick}
    ref={subtitleEl}
  >
    Button2
</div>


按钮2
我认为基本上addeventlistener创建了一个闭包，它自己版本的
count
独立于父组件。一个简单的修复方法是允许useEffect函数在发生更改时重新运行（删除[]参数）：

useEffect(() => {
  const target = subtitleEl.current;
  target.addEventListener("click", () => {
    console.log("click");
    onSubtitleClick();
  });

  return () => {
    target.removeEventListener("click", null);
  };
}); // removed [] arg which prevents useeffect being run twice