React-根据搜索和下拉值过滤数组

Question

我有一个显示文章标题列表的页面。在这个页面上，我添加了一个搜索栏和一个下拉菜单，以便能够过滤这个数组。 onChange 我正在调用setSearchTerm 的搜索的输入字段。我还有一个All, True and False 的下拉过滤器菜单，此数组中有一个对象completed。点击真/假后，它会根据文章是否完成过滤并返回。

单独来说，它们都按预期运行，但是当我让它们一起工作时，我遇到了一些问题。我希望能够在过滤的文章标题中进行搜索。例如。如果我选择“True”，我希望能够搜索所有“True”文章。因此，该数组将通过下拉值“True”和在搜索栏中输入的单词进行过滤。

这是我苦苦挣扎的地方：

  } else if (searchTerm != "" && filter != "") {
            console.log('here')

           // return what includes the search term
            val.title.toLowerCase().includes(searchTerm.toLowerCase())
            return val
          }

根据逻辑，我期望当 search 和 filter 都不为空时，返回与搜索词匹配的内容。目前，下拉和搜索都没有返回任何内容。

这是整个逻辑设置：

 let posts =  articles.filter((val) => {
  // if search is empty and if "all" or nothing is selected return the entire array
  if (searchTerm == "" && filter == "" || filter == "all") {
    return val

 // if the filter is not selected, return whats included with the search term 
  } else if (filter == "" && val.title.toLowerCase().includes(searchTerm.toLowerCase())) {
      return val

 // if search is empty and filter drop down value exists return what matches with the filter 
  } else if (searchTerm == "" && val.completed.toString().includes(filter)) {
    return val

 // if there neither are empty do logic here
  } else if (searchTerm != "" && filter != "") {
    console.log('here')

   // return what includes the search term
    val.title.toLowerCase().includes(searchTerm.toLowerCase())
    return val
  }
})

这是我的完整代码sn-p：

 import { useState, useEffect } from 'react';

const Posts = ({ articles }) => {
 

  const [searchTerm, setSearchTerm] = useState("");
  const [filter, setFilter] = useState("")

      let posts =  articles.filter((val) => {
  // if search is empty and if "all" or nothing is selected return the entire array
  if (searchTerm == "" && filter == "" || filter == "all") {
    return val

 // if the filter is not selected, return whats included with the search term 
  } else if (filter == "" && val.title.toLowerCase().includes(searchTerm.toLowerCase())) {
      return val

 // if search is empty and filter drop down value exists return what matches with the filter 
  } else if (searchTerm == "" && val.completed.toString().includes(filter)) {
    return val

 // if there neither are empty do logic here
  } else if (searchTerm != "" && filter != "") {
    console.log('here')

   // return what includes the search term
    val.title.toLowerCase().includes(searchTerm.toLowerCase())
    return val
  }
})


 return (
      <> 
<select value={filter} onChange={(event) => {setFilter(event.target.value)}} className="dropmenu dropdown-menu"> 
    <option value="">All</option>
                <option value="true">True</option>
                <option value="false">False</option>

    </select>
       <input
        type="text"
        placeholder="Search..."
        onChange={(event) => {
          setSearchTerm(event.target.value);
        }}
      />
       <h1>h1</h1>
    <ul className='list-group mb-4'>
      {posts && posts.map(post => (
        <li key={post.id} className='list-group-item'>
          {post.title}
        </li>
      ))}
    </ul>
   
    </>

  );
};

export default Posts;

当文章被True或False过滤时，我如何设置这个条件来让用户可以搜索？

文章数组：

const articles = [{"title": "title one", completed: false}, 
{"title": "article two", completed: true}, 
{"title": "testing three", completed: false}, 
{"title": "title four", completed: false}, 
{"title": "title five", completed: true}] 

Answer 1

按照您的原始格式，只需将条件移动到if 语句中

} else if (searchTerm != "" && filter != "" && 
              val.title.toLowerCase().includes(searchTerm.toLowerCase())) {
            console.log('here')

           // return what includes the search term
            
            return val
          }

Answer 2

你需要做的就是像这样在最后一种情况下添加这一行

else if (searchTerm !== "" && filter !== "") {
    console.log('here')
   // return what includes the search term
    if(val.title.toLowerCase().includes(searchTerm.toLowerCase()) && val.completed.toString().toLowerCase().includes(filter.toLowerCase()))
      return val
  }

它的基本作用是检查 val 中的 completed 属性是否等于 filter 和 searchTerm 是否相等title 我只是结合了你的逻辑，但这样做代码会更整洁

else if (val.title.toLowerCase().includes(searchTerm.toLowerCase()) && val.completed.toString().toLowerCase().includes(filter.toLowerCase())) {
   // return what includes the search term
      return val
  }

因为当且仅当 searchTerm 和 filter 都是 != "" 时它不会达到这个 else，所以我只是将内部条件移动到 else if