React Native - 如何使用过滤器删除列表

Question

我一直试图在按下按钮时删除一个列表，但它根本不起作用。我知道我应该使用 value.id !== id，所以我这样做了，但不太确定我尝试的方式是否正确。

这是我试过的代码。


import React, { useState } from 'react';
const cartData = [
  {
    id: 0,
    store: 'Zaful',
    productImage:
      'https://gloimg.zafcdn.com/zaful/pdm-product-pic/Clothing/2021/01/20/thumb-img/1612378696788831740.jpg',
    productName: 'Jacket',
    optColor: 'black',
    optSize: 'S',
    price: 50000,
  },
  {
    id: 1,
    store: 'Zaful',
    productImage:
      'https://gloimg.zafcdn.com/zaful/pdm-product-pic/Clothing/2020/09/28/goods-img/1603157669032643775.jpg',
    productName: 'Padded Jacket',
    optColor: 'Blue',
    optSize: 'S',
    price: 35000,
  },
];

const PaymentCart = ({ selectedNum, totalNum }) => {
  const navigation = useNavigation();

  const [cart, setCart] = useState(cartData);
  const [isChecked, setIsChecked] = useState([]);
  const isAllChecked = isChecked.length === cartData.length;
  const setIsAllChecked = () => {
    setIsChecked(isAllChecked ? [] : [...cartData.map((item) => item.id)]);
  };

  const handleChecked = (id) => {
   
    setIsChecked((prevState) => {
      const index = prevState.indexOf(id); 
      if (index === -1) {
        return [...prevState, id];
      } else {
        const tempArr = [...prevState];
        tempArr.splice(index, 1);
        return [...tempArr];
      }
    });
  };

  // This is the function I want to fix
  const onRemove = (id) => {
    console.log(id);
    const newCart = cart.filter((value) => value.id !== id);
    setCart(newCart);
  };

  return (
    <View style={[styles.container]}>
      {cartData?.length > 0 ? (
        <>
          <ScrollView>
            <CheckBoxSet
              isChecked={isAllChecked}
              setIsChecked={setIsAllChecked}
              checkBoxText={'Select All (2/3)'}
              deletedText={'Delete Selected'}
            />
            <View style={[styles.contentBox]}>
              <Text style={[styles.storeName]}>{cartData[0].store}</Text>
              {cartData.map((item, index) => (
                <View key={item.id} style={{ marginBottom: 30 }}>
                  <CheckBoxSet
                    isChecked={isChecked.includes(item.id)}
                    setIsChecked={() => handleChecked(item.id)}
                    checkBoxText={'Select'}
                    deletedText={'Delete'}
                    checkBoxTextStyle={[styles.checkBoxText]}
                    containerStyle={{ marginBottom: 13 }}

                    // This is what I want to fix
                    deleteOnPress={() => onRemove(item.id)}
                  />
                  <ProductInfoBox
                    price={item.price}
                    productImage={{
                      uri: item.productImage,
                    }}
                    productName={item.productName}
                    optColor={item.optColor}
                    optSize={item.optSize}
                  />
                </View>
              ))}
            </View>
          </ScrollView>
        </>
      ) : (
        <View style={[styles.noProductsContainer]}>
          <Text style={[styles.noProducts]}>장바구니에 상품이 없어요.</Text>
        </View>
      )}
    </View>
  );
};

export default PaymentCart;

我不知道我做错了什么。也许与setIsAllChecked有关？我也应该使用它吗？

Answer 1

您应该映射到 cart 而不是 cartData:

因为onRemove修改了cart


 {cart.map((item, index) => (

React Native - 如何使用过滤器删除列表

React Native - How to delete a list using filter

mapping

filter

react-native