如何在React中从useSprings数组移除元素？

我之前在相关平台看到过类似问题，但给出的解决方案完全无效，谷歌搜索也没找到可行办法。

我使用的useSprings相关代码如下：

const fn = (order, down, originalIndex, curIndex, y) => index =>
  down && index === originalIndex
    ? {
        y: curIndex * 100 + y,
        scale: 1.1,
        zIndex: "2",
        shadow: 15,
        immediate: n => n === "y" || n === "zIndex"
      }: {
        y: order.indexOf(index) * 100,
        scale: 1,
        zIndex: "0",
        shadow: 1,
        immediate: false
      };

const [items, setItems] = useState(["a",'b','c','d']);
// items表示项目顺序

const [springs, setSprings] = useSprings(items.length, fn(items.map((_, index) => index))); // 创建springs，每个元素对应一个项目，控制其变换、缩放等属性。

现在我想从springs数组里移除一个元素，尝试了下面的代码但没成功：

function deleteFirstItem () {
    setItems(items.filter((_, index) => index !== 1));
    setSprings(order.length, fn(order)); // 我原以为只更新items数组就行，但没用，所以加了这行，还是解决不了问题。
}

问题是这个函数完全无效，springs数组根本没变化。

核心问题在于更新items后未同步维护顺序数组，且调用setSprings时参数错误，同时没有利用函数式更新获取最新状态，导致闭包捕获旧值。

修正步骤：

• 用函数式更新获取最新的items状态，避免闭包问题。
• 删除元素后生成新的顺序数组（对应新的项目索引）。
• 调用setSprings时传入新的弹簧数组长度和基于新顺序的配置函数。

修正后的删除函数：

function deleteFirstItem() {
  setItems(prevItems => {
    // 生成删除指定元素后的新items数组
    const newItems = prevItems.filter((_, index) => index !== 1);
    // 生成新的顺序索引数组
    const newOrder = newItems.map((_, idx) => idx);
    // 更新springs：长度为新数组长度，配置函数基于新order
    setSprings(newOrder.length, fn(newOrder));
    return newItems;
  });
}

同时初始化useSprings时要确保参数正确，避免使用未定义的变量：

// 初始化时用items的索引作为order
const [springs, setSprings] = useSprings(items.length, fn(items.map((_, index) => index)));

这样修改后，删除元素时springs数组会同步更新，长度减少，对应项目的动画配置也会重新计算。

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