Question

背景：

Iam构建一个ReactJS应用程序。后端REST服务为我提供了JSON有效负载

this.state.payload =  [ { age:21, male: 'true' } , { age:31, male: 'false' } ];

我有以下代码在页面中显示此有效负载。

      <div>
        {this.state.payload  && this.state.payload.map( (row, index) => (
        <div key={index}>
            <div> {row.age}</div>
            <div> {row.male}</div>
          </div> ))
         }
      </div>

问题：

此刻，我正在屏幕上的有效负载中显示所有记录。

我不确定如何根据条件在渲染时跳过记录。（例如，如果年龄小于25岁，则跳过一条记录...不显示）。

Answer 1

只需使用Array#filter：

  <div>
    {this.state.payload && this.state.payload
      .filter(row => row.age >= 25)
      .map((row, index) => (
        <div key={index}>
          <div> {row.age}</div>
          <div> {row.male}</div>
        </div>)
      ))}
  </div>

感谢@ Curious13在评论中提到服务器/客户端问题。处理此问题的另一种方法当然是让服务器预先过滤信息（即在服务器端进行过滤）。如果存在敏感度问题，您当然想这样做（即，用户甚至不应该意识到25岁以下的人...而且知道如何访问控制台的任何人都可以看到，即使您没有呈现到屏幕上）。但是，如果过滤是动态的，并且/或者我们谈论的不是很多数据，那么可以使用Array＃filter在前端进行过滤。

我们如何在ReactJS中遍历数组时跳过记录

1 个答案: