Question

我正在尝试创建一种搜索方法来搜索对象数组。

这就是我要工作的。

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库进行诸如find之类的基本计算。您可能应该使用searchTitle而不是text来提供更多有关string的含义的上下文。

正如上文提到的凯尔（Kyle），find将带给您第一次机会，filter将带给您所有机会（您正在过滤掉不匹配的人，这反过来又给了您全部。

Answer 3

好吧，这很愚蠢:)正如adiga指出的那样，我收到了错误消息，因为某些物品的title未定义。从数据库中删除这些元素可解决此问题。我猜想我应该检查项目是否具有未定义的属性，如果为true，则从过滤后的数组中将其删除。

工作方法

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: [] });
}

通过对象键进行搜索

3 个答案: