React Native - Фильтр поиска

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

Если вы решили написать это самостоятельно, вам понадобится выполнить фильтрацию на разных уровнях для массивов , содержащих ключи, которые соответствуют значениям, случаи, когда ключи не существуют, и т. Д.простая реализация, вы можете изменить свою функцию так, чтобы она принимала ключ, сравнить, используя , содержит (.indexOf ()> -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,
    });     
}