如何使用 react 分别实现/渲染两个过滤器

Question

如何在表格行中使用 postRes 实现这两个过滤器？ postRes 是 json api 响应。 includeKeyword & searchVolume 是状态钩子。如果状态为空，我不想实现过滤器。提前感谢您的帮助

  let includeKeywordResults = !includeKeyword  ? postRes : postRes.filter(data =>
    data.text.toLowerCase().includes(includeKeyword.toLocaleLowerCase())) 
  

 let searchVolumeResults = !searchVolume ? postRes : postRes.filter(data => 
  data.keyword_idea_metrics.avg_monthly_searches > parseInt(searchVolume) )

返回

        <div className="container table-responsive py-5"> 
      <table className="table table-bordered table-hover" id="table-to-xls">
        <thead className="text-white bg-dark">
          <tr>
            <th scope="col">Keyword</th>
            <th scope="col">Search Volume</th>
            <th scope="col">Competition</th>
            <th scope="col">CPC</th>
          </tr>
        </thead>
        <tbody>
    {includeKeywordResults !== undefined ? includeKeywordResults.map((data, index) => (
          <tr key={index}>
            <td>{data.text}</td>
            <td>{data.keyword_idea_metrics.avg_monthly_searches}</td>
            <td>{data.keyword_idea_metrics.competition}</td>
            <td>{data.keyword_idea_metrics.low_top_of_page_bid_micros}</td>
          </tr>
  )) : null}
  
  </tbody>
      </table>
      </div>
      </div>
    }

Answer 1

使用您的各种条件创建一个过滤器函数并将其传递给 Array.filter 原型。函数看起来像这样（未测试）：

const filterFunction = (a) => {
   if (!includeKeyword && !searchVolume){
      return true
   } else if (includeKeyword && !searchVolume){
      return a.text.toLowerCase().includes(includeKeyword.toLocaleLowerCase())) 
   } else if (!includeKeyword && searchVolume){
      return  a.keyword_idea_metrics.avg_monthly_searches > parseInt(searchVolume)
   } else {
      a.text.toLowerCase().includes(includeKeyword.toLocaleLowerCase())) && a.keyword_idea_metrics.avg_monthly_searches > parseInt(searchVolume) 
   }
}

并在你的地图之前传递它：

includeKeywordResults.filter(filterFunction).map((data, index) => (