Question

我有这些数据：

export const recepies = [
{
  key: '1',
  title: 'Recepie Name',
  ingredients: [
    {
      id: '1',
      name: 'pepperoni'
    },
    {
      id: '2',
      name: 'pineapple'
    }
  ]
},
{
  key: '2',
  title: 'Another recepie',
  ingredients: [
    {
      id: '1',
      name: 'apple'
    },
    {
      id: '2',
      name: 'orange'
    }
  ]
}
];

我有一个过滤器函数，它从textInput接收一个字符串，然后我用该过滤器的结果设置状态。

filter(text) {
    const newData = recepies.filter(function (item) {
      const itemData = item.title.toUpperCase();
      const textData = text.toUpperCase();
      return itemData.indexOf(textData) > -1;
    });
    this.setState({
      text: text,
      data: newData,
    });
  }

现在我只能通过他们的'头衔'搜索收据，我怎么能用他们的任何成分搜索接收

感谢您的帮助！

Answer 1

如果你自己编写这个，你需要处理不同级别的过滤，包括包含与值匹配的键，不存在键的情况等。一个简单的实现，你可以修改你的函数来接受一个键，使用 contains （.indexOf（）＆gt; -1）进行比较并做一个浅过滤器，如下所示：

filter(key, text) { const newData = recepies.filter((item) => item[key].toUpperCase().indexOf( text.toUpperCase() ) > -1 ); this.setState({ text: text, data: newData, }); }

但是，我强烈建议使用lodash甚至是searchjs NPM软件包，它会更优雅地让您搜索文本并处理正常错误和深度搜索您可能需要的案例。

Answer 2

试试这个：

   filter(text) {
        const newData = recipies.filter((recipe)=>{
          recipe.ingredients.forEach((ingredient)=>{
                 if(ingredient.name === text)
                    return true
           })
        })

   this.setState({
      text: text,
      data: newData,
    });     
}

React Native - 搜索过滤器

2 个答案: