带有反应钩子和点击事件的陈旧闭包

Question

我创建了一个 codesandbox 以便于调试：
https://codesandbox.io/s/hardcore-dirac-nh4iz?file=/src/App.tsx

我构建了一个 DataList 组件，我像这样使用它：

function App() {
  const [count, setCount] = useState(0);
  const countRef = useRef(count);

  const handleSelect = () => {
    setCount(count + 1);
    countRef.current = count + 1;
    console.log({ count });
  };

  return (
    <>
      <p>Stale closures prevent the count state from displaying correctly</p>
      <DataList.List label="testing">
        {data.map((d) => (
          <DataList.Item key={d} onSelect={handleSelect}>
            {d} {count}
          </DataList.Item>
        ))}
      </DataList.List>
    </>
  );
}

所有功能都在 useListBox 挂钩内处理，其中包括从每个子项获取 onSelect 道具并将其绑定到列表本身的点击事件。但是，陈旧的关闭阻止了 count 值的更新。

对于这方面的任何帮助，我将不胜感激，因为陈旧的闭包还没有为我点击。

我怀疑，我需要 onSelect 依赖于 handleClickEvent 回调，但不确定。

Answer 1

问题在于您的 useEffectOnMount 的定义方式。每当 children 更新时，即使在挂载之后，您也需要考虑更改。将它从 useEffectOnMount 更改为 useEffect 并且一切正常：-

分叉沙箱 - https://codesandbox.io/s/friendly-fog-inv8h?file=/src/components/DataList/DataList.tsx

带有反应钩子和点击事件的陈旧闭包

Stale closures with react hooks and click events

javascript

closures

types

reactjs

react-hooks