Реагируйте - Как я могу отфильтровать. () Мой массив объектов?

Question

Я вытягиваю массив объектов из внешнего API. Я беру этот массив объектов с именем trails и использую .filter() для фильтрации объектов на основе поля ввода, userInput. Вот как выглядит код:

 onChange = (e) => {
   let trails = this.props.trails;
   const userInput = e.currentTarget.value;
   const filteredTrails = trails.filter(
     (obj) => obj.name.toLowerCase().indexOf(userInput.toLowerCase()) > -1);
   console.log(userInput);
   console.log(filteredTrails);
   this.props.searchTrails(this.state.filteredTrails);
   this.setState({
     userInput,
   });
 };

Как вы можете видеть, я передаю filteredTrails в качестве пропуска методу searchTrails в моем компоненте уровня приложения. Это выглядит так:

const searchTrails = (filteredTrails) => {
    setTrails(filteredTrails);
    console.log(filteredTrails);
  };

Моя проблема заключается в том, что фильтр работает только в одном направлении.

Если пользователь, например, хочет нажать клавишу Backspace, как мне это сделать? добавить следы к этому filteredTrails массиву объектов?

Заранее спасибо!

Answer 1

Нет обратного «фильтра», поэтому фильтр не изменяет исходный массив, а возвращает новый массив. Так что, где ваш код работает неправильно, вы переопределяете «исходный код» отфильтрованной версией. Таким образом, вам придется снова получать полный исходный код из своего API, что является пустой тратой, поскольку, скорее всего, оно не изменилось.

Теперь, я предполагаю, что исходя из структуры вашего приложения, оно не тот же компонент, который делает фильтрацию и отображение найденных следов, может быть? В любом случае, не бойтесь хранить дополнительный массив того, что отображается в данный момент.

Таким образом, ваш поток данных может быть:
Получить полный список из API, сохранить в rawTrails AND FilterTrails (в компонент вашего приложения)
Пользователи что-то набирают
Создают подмножество из rawTrails и сохраняют в FilterTrails (используйте это для отображения этого списка или чего-то еще, что вы делаете)
Пользователь вводит что-то еще или очищает свой фильтр
Установить фильтрTrails = rawTrails

Другой вариант - просто отфильтровать необработанный список при каждом рендере (использование торговой памяти для загрузки ЦП)

Answer 2

не следует ли добавлять фильтрованные трейлы, не используя их из состояния?

   this.props.searchTrails(filteredTrails);