React中如何查找state数组对象索引实现购物车商品删除

你现有删除逻辑存在两个核心问题：

• 第一，key是绑定在商品数据上的唯一标识，和商品在数组中的位置没有必然联系，当商品key不连续、有中间项被删除时，用key-1计算索引必然出错。
• 第二，splice是原地修改数组的方法，会直接改动原state数组，违反React state不可变更新的原则，容易引发不可预期的渲染问题；且splice返回值是被删除元素组成的数组，你之前的写法setCart([...cart.splice(index,1)])实际会把购物车设置为「仅包含被删除的那一项」，逻辑本身存在错误。

推荐方案：用唯一标识+filter直接过滤，不需要查找索引 #

删除操作完全不需要获取数组索引，你每个商品本身就有全局唯一标识（productID/id/key均可），直接用Array.filter过滤掉目标商品即可，写法最简单也最不容易出错：

const cartRemove = (targetId) => {
  // 用你商品的唯一字段做判断即可，比如用productID就匹配productID，用id就匹配id
  setCart(prevCart => prevCart.filter(item => item.productID !== targetId))
}

// 调用时直接传入当前商品的唯一标识，不需要计算位置
<... onClick={() => cartRemove(props.productID)} />

这个写法完全符合React state更新的不可变要求：filter会返回全新数组，不会改动原cart数组；用函数式更新的写法还能避免闭包拿到旧state的问题。

需要获取目标项索引的场景（比如修改指定项属性） #

如果后续有其他逻辑必须拿到目标商品在数组中的索引，不要手动计算位置，用Array.findIndex匹配商品唯一标识即可：

// 比如匹配key等于传入值的商品索引
const targetIndex = cart.findIndex(item => item.key === props.key)

// 删除对应项时不要用splice修改原数组，用slice生成新数组
if (targetIndex > -1) {
  setCart(prevCart => [
    ...prevCart.slice(0, targetIndex),
    ...prevCart.slice(targetIndex + 1)
  ])
}

现有addToFav方法的隐藏bug #

你现在push新商品之后链式调用sort的写法是错的：Array.push的返回值是数组更新后的长度（数字类型），数字没有sort方法，这段代码实际不会执行排序，还可能抛出报错。正确的排序写法应该是push完成后再对整个数组排序：

newFavs.push({
  nome: infos[id-2].nomeCompleto,
  value: infos[id-2].valor,
  id: infos[id-2].id,
  quantity: 1,
  key: infos[id-2].key
})
// push完成后再对数组排序
newFavs.sort((a, b) => a.key - b.key)

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