Question

我的搜索功能使用过滤数组中的字段。我尝试其他方式，但没有成功。我可以使用一行代码来搜索（过滤）数组中的所有字段吗？

搜索代码如下：（如果我在数组中有很多字段。例如：“title”，“date”，“id”，“name”）

filterList = (e) => {
    let { value } = e.target
    this.setState({ value }, () => {

        var updatedList = this.state.issues;
        updatedList = updatedList.filter((item) => {
            return item.title.toLowerCase().search(this.state.value.toLowerCase()) !== -1;
        });
        this.setState({ issues: updatedList });
    });
  }

Answer 1

您可以将some方法与Object.Keys结合用于过滤所有字段。

var searchValue = this.state.value.toLowerCase();
updatedList = updatedList.filter((item) => {
    return Object.keys(item).some(key => item[key].toString().search(searchValue) !== -1);
});

Answer 2

您可以使用Object.keys获取对象键的数组。如果你想避免不必要的重新渲染，你也应该只使用setState

filterList = (e) => {
    let { value } = e.target
    this.setState((previousState) => {
        var updatedList = previousState.issues;
        updatedList = updatedList.filter(
          (item) => Object.keys(item).some(key => item[key].search(value) !== -1)    
        );
        return {
          value,
          issues: updatedList
        }
    });
  }

Answer 3

更强大的过滤功能搜索，使用验证防止“空”值。

const searchQuery = products.filter((query) => {
  return Object.keys(query).some(key => 
    (typeof query[key] === 'string' && query[key].includes(searchValue))
    || (typeof query[key] === 'number') && query[key] === Number(searchValue))
})

React如何搜索（过滤）数组中的所有字段？

3 个答案: