javascript - 在另一种方法上过滤方法？

Question

我想在下面定义的 renderTable 方法上运行过滤器方法。是否可以这样做：

renderTable().filter(x => x.name)?

现在，我有一个表格，其中包含每个类别的行及其来自提供一些 json 数据的 url 的结果。

我想做一个功能，允许用户调整设置以返回他们想要的结果。

代码

const renderTable = () => {
 return players.map(player => {
  return (
    <tr>
      <td>{player.name}</td>
      <td>{player.age}</td>
      <td>{player.gender}</td>
      <td>{player.state}</td>
      <td>{player.status}</td>
    </tr>
   )
 })
}

return (
 <div className = "App">
  <h1>Players</h1>
   <table id = "players">
    <thead>
     <tr>
       <th>Name</th>
       <th>Age</th>
       <th>Gender</th>
       <th>State</th>
       <th>Status</th>
     </tr>
    </thead>
   <tbody>{renderTable()}</tbody>
  </table>
 </div>
);

标签： javascriptjsonreactjsfilter

Answer 1

您可以在地图之前应用过滤器。在这里，试一试：

const renderTable = () => {
  return players
    .filter(player => player.state === "NSW")
    .map(player => {
      return (
        <tr>
          <td>{player.name}</td>
          <td>{player.age}</td>
          <td>{player.gender}</td>
          <td>{player.state}</td>
          <td>{player.status}</td>
        </tr>
      );
    });
};

---

这是您的参考的工作示例 CodeSandbox。