在 React Native 中删除数组中数量为 0 的项目

Question

我想删除数组中数量为零的项目。我试过了：

    constructor(props) {
    super(props);
    this.state = {
    serviceAvailed: [{"label": "Top", "quantity": 2}, {"label": "Bottoms", "quantity": 0}, 
    {"label": "Jacket", "quantity": 1}, {"label": "Beddings", "quantity": 0}, {"label": "Shoes", 
    "quantity": 0}];,
    }

在组件上确实挂载了我循环数组中的项目并调用方法 removeItem 应该删除所有数量为零的项目

   componentDidMount() {
    let {serviceAvailed  } = this.state;
    serviceAvailed = this.state.array.map((item, i) => {
    let quantity=parseInt(item.quantity);
       if(quantity<1){
       this.removeItem(i)
       }});
   }

删除数组的函数

   removeItem(index) {
    const serviceAvailed = this.state.serviceAvailed;
    serviceAvailed.splice(index, 1);
    this.setState({ serviceAvailed });
    console.log(serviceAvailed)
   }

预期结果： serviceAvailed: [{"label": "Top", "quantity": 2}, {"label": "Jacket", "quantity": 1}];,

Answer 1

你可以使用数组过滤方法

let newArr = serviceAvailed.filter(function (e) {
        return e.quantity > 0;
    });
    console.log(newArr );

Answer 2

问题

array::map 旨在将数组中的每个元素映射到新数组。该操作是一一对应。它也意味着是一个纯函数，这意味着它具有 ZERO 副作用，例如删除当前正在迭代的数组的元素。 array::reduce 和 array::filter 是删除元素或“减少”输入的更好选择。

解决方案

使用array::filter 允许您遍历一个数组并返回一个包含仅 元素的新数组，这些元素通过了过滤谓词。创建一个过滤谓词函数，如果对象的数量属性大于0，则返回真或假。

const quantityGreaterThanZero = ({ quantity }) => quantity > 0;

注意：0 是一个“假”值，大于0 的数字是“真”值，所以上面可以简化为简单地返回数量。如果为真，则谓词函数为真，否则为假。

const quantityGreaterThanZero = ({ quantity }) => quantity;

现在您可以将谓词函数作为回调传递给array::filter。

const greaterThanZero = data.filter(quantityGreaterThanZero);

const data = [
  { label: "Top", quantity: 2 },
  { label: "Bottoms", quantity: 0 },
  { label: "Jacket", quantity: 1 },
  { label: "Beddings", quantity: 0 },
  { label: "Shoes", quantity: 0 }
];

const quantityGreaterThanZero = ({ quantity }) => quantity;

console.log(data.filter(quantityGreaterThanZero));