为何第二次调用reorderData时无法正确克隆dataOrdered数组？

问题核心 #

你遇到的问题是：首次拖拽重排序后dataOrdered状态更新正常，但第二次调用reorderData时，const allData = [...dataOrdered];始终拿到初始旧数组，而非更新后的最新值。

根本原因 #

这不是深浅拷贝的问题，而是React闭包和useState异步更新特性导致的：

• reorderData函数在组件渲染时创建，会捕获当时的dataOrdered状态值；如果函数未随状态更新重新创建，就会一直复用旧的状态值。
• useState的更新是异步的，直接在函数里读取dataOrdered可能拿到的是更新前的旧值。

解决方案：使用函数式更新获取最新状态 #

React的setState支持传入函数，这个函数会接收最新的状态值作为参数，确保你操作的始终是最新的数组。修改你的reorderData函数，把状态更新逻辑放到setDataOrdered的函数参数里：

const [dataOrdered, setDataOrdered] = useState([]);

useEffect(() => {
  setDataOrdered(data);
}, [data]);

const reorderData = (node, toNode, position) => {
  // 用函数式更新获取最新状态
  setDataOrdered(prevData => {
    const newPosition = position === "before" ? toNode.id - 1 : toNode.id;
    const newNodeWithIDRenew = { ...node.datum, id: "needNewID" };
    const allData = [...prevData]; // 基于最新状态克隆数组

    const newData = [...allData.slice(0, newPosition), newNodeWithIDRenew, ...allData.slice(newPosition)];
    const dataWithoutNodeMoved = newData.filter(d => d.id !== node.id);
    const finalDataOrdered = dataWithoutNodeMoved.map((d, index) => ({ ...d, id: index + 1 }));

    return finalDataOrdered;
  });
};

额外优化建议 #

1. 如果reorderData作为props传递给子组件，用useCallback包裹它，避免不必要的函数重新创建：

const reorderData = useCallback((node, toNode, position) => {
  setDataOrdered(prevData => {
    // 同上逻辑
  });
}, []); // 因使用函数式更新，无需依赖dataOrdered

2. 把filter里的!=改成!==，遵循严格相等的代码规范。

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