如何使用React Hooks删除状态中嵌套数组内的指定元素

代码问题分析 #

• 状态更新回调中直接引用外部的myCheeses而非回调入参prev，容易因闭包拿到旧状态，导致更新不符合预期
• 返回的新状态结构完全错误：原状态顶层包含id、title、items三个字段，你返回的对象既丢失了顶层字段，还把过滤后的单个变体数组直接赋值给了顶层items字段，和原数据结构不匹配

正确实现 #

const removeMyCheese = (variantID, itemindx) => {
  setMyCheeses((prev) => {
    const newItems = prev.items.map((item, idx) => {
      // 仅修改对应下标的奶酪条目
      if (idx === itemindx) {
        return {
          ...item,
          // 过滤删除目标变体
          variants: item.variants.filter(v => v.id !== variantID)
        }
      }
      // 其余条目保持不变
      return item
    })
    // 返回和原结构完全一致的新状态
    return {
      ...prev,
      items: newItems
    }
  })
}

实现说明 #

React状态更新要求不可变修改，嵌套结构需要逐层复制修改：遍历所有奶酪条目，匹配到目标下标条目时，复制该条目并更新其变体数组，其余条目保持原样，最后拼装为和原结构完全一致的新状态对象即可完成更新。

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