如何通过吸收多个对象值来搜索反应？

Question

请参见下面的代码，试图通过将输入值与多个对象值进行比较来搜索。

<input type="search" placeholder="Search by Topic, Level or Subject..."
  onChange={(e) => {
    const searchGames = search.filter(item => item.Topic.toLowerCase().includes(e.target.value.toLowerCase()) ? item : null);
    setGame(searchGames);
    const searchGames2 = search.filter(item => item.Level.toLowerCase().includes(e.target.value.toLowerCase()) ? item : null);
    setGame(searchGames2);
    const searchGames3 = search.filter(item => item.Subject.toLowerCase().includes(e.target.value.toLowerCase()) ? item : null);
    setGame(searchGames3);
  }}
/>

Answer 1

似乎比反应一个更多的编程问题。

您可能已经注意到您的示例代码缺乏“或”。

尝试仅检查任何条件是否为true。

<input type="search" placeholder="Search by Topic, Level or Subject..."
  onChange={(e) => {
    const filteredGames = search.filter(item => {
      const topicIncludes = item.Topic.toLowerCase().includes(e.target.value.toLowerCase());
      const levelIncludes = item.Level.toLowerCase().includes(e.target.value.toLowerCase());
      const subjectIncludes = item.Subject.toLowerCase().includes(e.target.value.toLowerCase());
      return topicIncludes || levelIncludes || subjectIncludes;
    })
    setGame(filteredGames)
  }}
/>

同样，连续设置一个状态几乎绝不是一个好主意。