Question

我创建了一个代码沙盒以便于调试：
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 道具并将其绑定到 List 本身的点击事件。但是，过时的闭包会阻止 count 值更新。

我很感激这方面的任何帮助，因为我还没有点击过时的关闭。

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

Answer 1

问题在于您的 useEffectOnMount 的定义方式。即使在挂载之后，只要 children 更新，您也需要考虑更改。将它从 useEffectOnMount 更改为 useEffect 一切都会正常的 :-

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

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

1 个答案: