@Meinerdi

Как правильно сделать поиск в ToDo приложении на React?

Вот мое приожение https://codesandbox.io/s/react-simple-code-editor-...

Как я реализовал поиск (Правильно ли?):

1) У главного компонента в стейте есть свойство, searchActivated: false
2) Если в поиск введен хоть один символ то searchActivated: true, и основной компонент принимает другой отсортированный массив
3) Основной компонент на вход принимает список задач, либо если searchActivated: true - другой массив, который является измененной копией списка задач
4) Когда в поисковом импуте нет никаких символов, от он изменяет searchActivated на false и тогда показывается снова основной список задач

Проблема:
В момент когда в поиске введена хоть одна буква, и отсеивается определенный список, если я нажимаю удалить элемент, то удаляется он из основного списка задач, а не в отсортированнной копии. Даже если в обработчике onDelete поставить условие, что если searchActivated: true, то удалять из отсортированной копии, он всё равно не будет правильно работать.

Поиск должен работать по каждой введенной букве и дате из датапикера (пока не сделал ещё), при этом должен совместно работать с сортировкой (а это я вообще пока не понимаю как сделать)

Подскажите, что исправить?
  • Вопрос задан
  • 63 просмотра
Решения вопроса 1
Gimir
@Gimir
JavaScript dev
Если задача удалить элемент из отфильтрованного массива, то вот, чуть подправил метод onDelete()
onDeleteTask = id => {
    if (this.state.searchActivated) {
      this.setState(state => ({
        searchedTasks: state.searchedTasks.filter(i => i.id !== id)
      }))
    }
    else {
      this.setState(state => ({
        tasks: state.tasks.filter(i => i.id !== id)
      }));
    }
    
  };
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы