Question

我正在尝试实现一个过滤器功能，当用户在搜索栏中键入内容时，该功能能够在两个单独的JSON字段中进行搜索。搜索整个JSON会返回错误，如果我重复此功能，则两个相似的功能会相互抵消。

我当前的过滤器功能：

let filteredOArt = origArt.filter((origAItem) => {
                return origAItem.authors.toLowerCase().includes(this.state.search.toLowerCase())
            });

我希望能够在“作者”字段和“描述”字段中显示搜索外观。

在React渲染之前，我让此函数监听状态：

updateSearch(event) {
    this.setState({ search: event.target.value }) 
}

然后我的搜索功能位于React返回的输入字段中：

<h6>Search by author name: <input type="text" value={this.state.search} onChange={this.updateSearch.bind(this)} /></h6>

Answer 1

您可以像这样调整功能

let filteredOArt = origArt.filter((origAItem) => {
       return (
(origAItem.authors.toLowerCase().includes(this.state.search.toLowerCase())||

(origAItem.description.toLowerCase().includes(this.state.search.toLowerCase())
       )
)
        });

Answer 2

您实际上可以对两个字段都进行过滤。

给出您的searchValue和数组以及可以通过这种方式过滤的对象：

const filterByAuthorOrDescription = (searchValue, array) =>
  array.filter(
    item =>
      item.authors.toLowerCase().includes(searchValue.toLowerCase()) ||
      item.description.toLowerCase().includes(searchValue.toLowerCase())
  );

const filtered = filterByAuthorOrDescription(this.state.search, articles);

filtered现在将包含对象数组，这些对象包含可以描述的描述或作者中的searchValue。

Answer 3

您可以使用some来检查至少一个字段的过滤器是否为阳性：

let filteredOArt = origArt.filter(origAItem => ['authors', 'description'].some(field => origAItem.[field].toLowerCase().includes(this.state.search.toLowerCase())))

只需遍历要使用的其他字段名称即可。

如果提到的任何字段包含您的字符串，

Some将返回true，并避免代码中重复。

长语法：

origArt.filter(origAItem => {
    return ['authors', 'description'].some(field => origAItem.[field].toLowerCase().includes(this.state.search.toLowerCase()))
})

React / JS过滤器出现问题

3 个答案: