Question

我正在这样设置状态值：

this.setState({
  products: response.data.data.map(product => {
  return { key: product.id, value: product.productName };
    }),
});

但是我想摆脱类型不同于2的产品

我尝试过这样的事情：

this.setState({
  products: response.data.data.map(product => {
  return { key: product.id, value: product.productName };
    }).find(x => x.productType != 2),
});

但是这不起作用。.我想知道如何在这里做到这一点（避免使用我不想要的数据并设置状态值）。

Answer 1

您可以使用Array.filter()，如下所示：

const shouldFilter = true; // should we filter out unwanted values or keep all of them?
this.setState({
  products: response.data.data
    .filter(product => shouldFilter ? product.productType === 2 : true) // return only products with type === 2 if shouldFilter is true
    .map(product => {
      return { key: product.id, value: product.productName };
    })
});

首先过滤数组，然后映射到所需的值

Answer 2

考虑以下代码：

import React, { Component } from 'react';
import './App.css';


class App extends Component { 

state = {
  products: []
};  

constructor(){
  super();
  this.items = this.state.products.map((item, key) =>
    <li key={item.id}>{item.value}</li>
);
}




componentDidMount(){

  var responseData = [{key: 1, value: "CocaCola", type: "1" },{key: 1, value: "PepsiCola", type: "2"}, {key: 1, value: "Snickers", type: "1"},
   {key: 3, value: "Marshmallow", type: "2"},{key: 4, value: "Lolipop", type: "2"}];   


  var selectedProducts = responseData.filter(product => product.type !== "2"); 
   this.setState({products: selectedProducts}); 


}



  render() { 

    const items = this.state.products.map((item, key) =>
        <li key={item.id}>{item.value}</li>
    );

    return <ul>{items}</ul>
  };
}
export default App;

在这里，我们有带有描述产品的对象的responseData数组。为了从对象数组中删除某些对象，您需要使用称为filter（）的数组方法。此方法将一个函数作为参数，在我们的示例中，此函数对数组中的所有对象进行迭代，将每个对象作为乘积，然后仅返回product.type不等于“ 2”的那些乘积。然后，将状态属性“ products”的值设置（替换）为过滤后的数组的值。为了向用户显示结果数组，然后在构造函数方法中创建this.items来保存JSX列表项的数组，然后将其渲染到render（）方法中的DOM中。

设置状态并过滤数据-React / Javascript

2 个答案: