如何在反应中从数组中正确删除项目？

Question

我的项目中有 2 个组件。

我的项目中的购物车列表和购物车项目

在购物车列表中，我得到了类似的东西。

const examCartItemList = [
    {
        name: 'Mocasines Pastoret 01',
        description: 'Leather Loafer with Penny Bar',
    },
    {
        name: 'Mocasines Pastoret 02',
        description: 'Leather Loafer with Penny Bar',
    },
    {
        name: 'Mocasines Pastoret 03',
        description: 'Leather Loafer with Penny Bar',
    },
];


const CartList = ({navigation}) => {
    const [itemList, setItemList] = useState(examCartItemList);

    const removeItem = name => {
        const filteredArray = itemList.filter(item => item.name !== name);
        setItemList(filteredArray);
    };

return (

<View style={[styles.pageContainer]}>
                    {itemList.map((cartItem, index) => (
                        <CartItem
                            removeItem={removeItem}
                            index={index}
                            key={index.toString()}
                            cartItem={cartItem}
                        />
                    ))}
                </View>
)

我将 removeItem 函数传递给子组件。由于我在 cartItem 组件中添加了删除按钮。

据我了解，该功能将删除我选择的项目。哪个工作正常。

问题是来自child component 的number of cart item 行为异常

在我的子组件中

我得到了这样的东西

const CartItem = ({cartItem, removeItem, index}) => {
  const [productCount, setProductCount] = useState(1);

  const decreaseProductCount = () => {
    if (productCount > 1) {
      setProductCount(productCount - 1);
    }
  };

  return (
    <View style={styles.componentContainer}>
      <View>
        <Image style={styles.componentImage} source={cartItem.source} />
      </View>
      <View style={styles.componentContent}>
        <View style={styles.cartItemNameContainer}>
          <Text style={[styles.nameText, styles.textDescription]}>
            {cartItem.name}
          </Text>
          <TouchableOpacity onPress={() => removeItem(cartItem.name)}>
            <Text style={globalStyle.normalText}>X</Text>
          </TouchableOpacity>
        </View> 
   </View> 
</View>

正如您在图片中看到的那样，正在发生的事情。如果删除名称为01 的项目。项目01 其自身被删除，但子项计数的删除与父项不同。如果我删除项目01，则应删除计数 3，但应删除计数 7

这是图片

Answer 1

我认为问题在于您将 id 值分配为映射操作的当前索引。当您移除 item 0 时，在下一次渲染中 item 0 仍然存在。我认为您必须为每个购物车项目分配一个静态 ID，就像这样：

const examCartItemList = [
     {
         id: 1,
         name: 'Mocasines Pastoret 01',
         description: 'Leather Loafer with Penny Bar',
     },
     {
         id: 2,
         name: 'Mocasines Pastoret 02',
         description: 'Leather Loafer with Penny Bar',
     },
     {
         id: 3,
         name: 'Mocasines Pastoret 03',
         description: 'Leather Loafer with Penny Bar',
     },
];

此外，按 id 删除项目是一个好习惯，所以也许您可以重新考虑更改 removeItem 逻辑以按 id 删除项目。

Answer 2

我有一些建议，

在examCartItemList 中使用id

const examCartItemList = [
{
    id: 1,
    name: 'Mocasines Pastoret 01',
    description: 'Leather Loafer with Penny Bar',
},
{
    id: 2,
    name: 'Mocasines Pastoret 02',
    description: 'Leather Loafer with Penny Bar',
},
{
    id: 3,
    name: 'Mocasines Pastoret 03',
    description: 'Leather Loafer with Penny Bar',
},

];

使用id 作为键并从这里传递productCount，

 <CartItem
     removeItem={removeItem}
     index={index} // Remove this prop if not used
     key={`${cartItem.id}`}
     cartItem={cartItem}
     productCount={itemList.length} // pass productCount from here
 />

使用唯一的 id 删除项目总是好的。如下更新removeItem func 并确保将id传递给该函数，

const removeItem = id => {
    const filteredArray = itemList.filter(item => item.id !== id);
    setItemList(filteredArray);
};

从CartItem 组件中移除productCount 逻辑。

这应该可以解决您的问题。