使用React DnD拖拽元素时状态重置问题求助

问题根源 #

Example.jsx中的addItem函数直接依赖当前作用域下的Items状态变量，由于React状态更新的闭包特性，拖拽触发状态更新时，函数捕获的Items可能是初始状态值，导致每次添加新元素时都基于初始数组重新创建，覆盖了之前已添加的元素。

修复方案 #

将setItems的更新方式改为函数式更新，确保每次状态更新都基于最新的状态快照：

修改Example.jsx中的addItem函数：

const addItem = (item) => {
  setItems(prevItems => [...prevItems, item]);
};

原理说明 #

函数式更新会接收React内部维护的最新状态作为参数（prevItems），通过展开这个最新数组并追加新元素，保证每次更新都是在已有元素的基础上进行，彻底避免闭包导致的旧状态复用问题。

验证修改后，拖拽元素到表单时，之前添加的元素会被保留，新元素正常追加到列表中。

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