该React Hooks用法是否正确？适配react-grid-layout示例代码疑问

你改写的函数组件版本代码大部分场景可正常运行，但存在闭包相关的潜在问题，具体说明如下：

1. 可正常运行的逻辑依据 #

你参考的原始代码是React类组件实现，通过this.setState更新存储列表的state；你改写成useState的函数组件写法后，核心逻辑和类组件完全对齐：都是用_.reject过滤掉匹配i值的列表项后更新状态，基础功能可以正常跑通。

2. 潜在问题说明 #

如果onRemoveItem没有随widget状态更新重新生成（比如用useCallback包裹但没把widget加入依赖数组），函数内部捕获的始终是首次渲染时的旧widget值，在连续快速删除、或有其他异步操作同时修改widget的场景下，会出现删除错误、状态更新不符合预期的问题。

3. 优化方案 #

推荐改用useState的函数式更新写法，直接从更新函数的入参拿到最新的状态值，完全规避闭包陷阱：

import _ from "lodash";

...

const [widget, setWidgetList] = useState([]);

function onRemoveItem(i) {
    console.log("removing", i);
    setWidgetList(prev => _.reject(prev, { i: i }));
}

如果不想额外依赖lodash，用原生数组filter方法也能实现完全相同的效果：

const [widget, setWidgetList] = useState([]);

function onRemoveItem(i) {
    console.log("removing", i);
    setWidgetList(prev => prev.filter(item => item.i !== i));
}

内容的提问来源于stack exchange，提问作者yongchang