React组件DataGrid状态修改后总是恢复为初始值，是什么原因？

你遇到的是React useState更新的闭包陷阱问题：

• 你当前写的setRows(rows.map(...))是直接使用当前渲染闭包中捕获的rows变量来计算新状态。如果你的事件处理函数因为依赖项缺失没有重新生成，每次调用时拿到的都是初始的rows值，所以每次更新都只会基于初始值修改，之前的修改自然会被覆盖。

把setRows的参数改成函数式更新的写法，React会自动把最新的状态作为参数传给这个回调函数，保证每次更新都是基于上一次的最新状态计算：

const statusHandleChange = (e ,id) => {
  setRows(prevRows => prevRows.map((row) => row.id === id ? {...row, status: e.target.value}: row))
};

如果改完还有问题，可以额外检查两个点：

• 你给DataGrid行绑定的statusHandleChange有没有加正确的依赖项（比如用useCallback包裹的话要把依赖补全）
• 有没有其他地方意外重置了rows状态

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