按 object 键反应搜索

Question

我正在尝试创建一个搜索方法来搜索 objects 的数组。

这是我的工作。

searchItemInput = (text) => {
    const search = text;
    const results = Lodash.filter(this.state.itemSearch, (item) => {
        return item.id.indexOf(search) > -1;
    });
    text.length > 0 ? this.setState({ item: results }) : this.setState({ item: [] });
}

这是数据的结构

Object {
  "id": "-M86doz_Xnd2nJyJtkNm",
  "image": "image",
  "link": "link",
  "source": "source",
  "title": "title",
}

我正在寻找的是按对象标题搜索，所以我尝试将 item.id.indexOf(search) 更改为 item.title.indexOf(search) 但提示错误 item.title 未定义

Answer 1

找一审使用 .find()

searchItemInput = (text) => {
    const search = text;
    const results = this.state.itemSearch.find(item => item.title === text);
    
    text.length > 0 ? this.setState({ item: results }) : this.setState({ item: [] });
}

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/find

找到所有

searchItemInput = (text) => {
    const search = text;
    const results = this.state.itemSearch.filter(item => item.title === text);

    text.length > 0 ? this.setState({ item: results }) : this.setState({ item: [] });
}

Answer 2

searchItemInput = (text) => {
    const searchTitle = text;
    const results = this.state.itemSearch.find(item => item.title === searchTitle);
    
    searchTitle.length > 0 ? this.setState({ item: results }) : this.setState({ item: [] });
}

您不需要使用 lodash 库来进行像查找这样的基本计算。您可能应该使用 searchTitle 而不是 text 来提供更多关于 string 值的含义的上下文。

正如 Kyle 上面提到的，find 会让你第一次出现，filter 会给你所有的（你过滤掉那些不匹配的，这反过来都给你了。

Answer 3

好吧，这很愚蠢 :) 正如 adiga 指出的那样，我收到错误是因为某些项目 title 未定义。从数据库中删除这些元素解决了这个问题。我想继续前进，我应该检查项目是否具有未定义的属性，如果为真，则将它们从过滤数组中删除。

工作方式

searchItemInput = (text) => {
    const search = text;
    const results = this.state.itemSearch.filter((item) => {       
       return item.title.indexOf(search) > -1;
    });
    search.length > 0 ? this.setState({ item: results }) : this.setState({ item: [] });
}

按 object 键反应搜索

React Search by object key

javascript

indexof

lodash

reactjs