Как правильно сделать поиск в ToDo приложении на React?
Вот мое приожение https://codesandbox.io/s/react-simple-code-editor-ecjyt?file=/src/App.js
Как я реализовал поиск (Правильно ли?):
- У главного компонента в стейте есть свойство, searchActivated: false
- Если в поиск введен хоть один символ то searchActivated: true, и основной компонент принимает другой отсортированный массив
- Основной компонент на вход принимает список задач, либо если searchActivated: true - другой массив, который является измененной копией списка задач
- Когда в поисковом импуте нет никаких символов, от он изменяет searchActivated на false и тогда показывается снова основной список задач
Проблема: В момент когда в поиске введена хоть одна буква, и отсеивается определенный список, если я нажимаю удалить элемент, то удаляется он из основного списка задач, а не в отсортированнной копии. Даже если в обработчике onDelete поставить условие, что если searchActivated: true, то удалять из отсортированной копии, он всё равно не будет правильно работать.
Поиск должен работать по каждой введенной букве и дате из датапикера (пока не сделал ещё), при этом должен совместно работать с сортировкой (а это я вообще пока не понимаю как сделать)
Подскажите, что исправить?
Ответы (1 шт):
Я бы использовал функциональные компоненты.
Стейт (useState) по минимуму: список дел, значения фильтров.
Сортировать/фильтровать можно и на рендере, а если нужна оптимизация -- useMemo.
Чем больше изменяемых состояний, тем легче запутаться. Все производные значения (которые можно расчитать) лучше описать, как функции, и если критично аккуратно настроить их кеширование/инвалидацию.