Question

我正在学习React基础知识，并遇到了给我带来很多麻烦的挑战。

我有“状态”功能中的物品清单。当我在屏幕上列出它们时，我想列出具有“ found = 0”值的那些。我试图在网络上搜索，尝试应用了许多不同的解决方案，包括stackoverflow中的解决方案，但是我不断收到很多不同的错误，因此无法正常工作。

这是我保存在App.js文件中的“状态”函数：

  state = {
counters: [
  { id: 1, title: "Soymilk", found: 1, value: 0 },
  { id: 2, title: "Mushroom", found: 0, value: 0 },
  { id: 3, title: "Tomatoes", found: 1, value: 0 },
  { id: 4, title: "Potatoes", found: 0, value: 0 },
  { id: 5, title: "Meat", found: 0, value: 0 },
  { id: 6, title: "Beans", found: 0, value: 0 },
  { id: 7, title: "Bread", found: 0, value: 0 }
]};

这是显示我的物品的counter.jsx代码：

  render() {
return (
  <div className="list-group">
    <span className="font-weight-bold list-group-item list-group-item-action flex-column align-items-start">
      {this.props.counter.title}
      <span className="font-weight-normal text-secondary float-right">
        {this.foundMessage()}
      </span>
    </span>
    <div className="row">
      <button
        onClick={() => this.props.onFind(this.props.counter)}
        className="btn btn-sm col-3 btn-primary col-6"
      >
        Found it!
      </button>
      <button
        onClick={() => this.props.onDelete(this.props.counter.id)}
        className="btn btn-danger btn-sm col-6"
      >
        No more needed!
      </button>
    </div>
  </div>
);}}

Answer 1

您可以过滤数据，

像这样

let filteredData= this.state.counters.filter(item=>item.found==0);
this.setState({counters:filteredData});

Answer 2

您可以使用数组的filter函数。像这样

var ages = [32, 33, 16, 40];

checkObj = (obj) => {
  return obj > 16;
}

let val = ages.filter(checkObj)

//val contains the filtered array with found == 0


// or you can use this way

let val = this.state.counters.filter((obj)=>{
              return obj.found == 0;
          })

希望这会有所帮助，如果我不了解您的问题。请回复

Answer 3

您可以使用map函数，该函数返回一个新数组，并在每个元素的回调中进行操作。

function filterCounters(){
   let newCounters = [];
    counter.map(element=>{
    if(element.found === 0 ){
      newCounters.push(element);
      }
})
return newCounters;
}

Answer 4

您可以使用.filter和.map数组方法，但这不是唯一的方法。

Here是一个完全满足您需求的示例。

如何过滤React中屏幕上显示的数组的项目？

4 个答案: