Задача сделать лайв поиск по массиву, + есть фильтрация (поиск

должен работать и по отфильтрованым элементам, и так же при нажатии на фильтры они должны учитывать слово введенное в поиск) . Так же есть удаление и добавление элементов. Как бы вы делали? Нужно же 2 стейта, один просто data в который придут данные с сервера, а второй filteredData , из которого и будет отрисовка (map) ? т.е. в функциях поиска и фильтров мы делаем setFilteredData(data.filter(...)...) ? или мы можем делать setFilteredData(filteredData.filter(...)...) ? Короче в любом случае нужно два стейта, что бы когда фильтры сняты, или пользователь удалил слово поиска, все вернуть на круги своя, т.к. setFilteredData(data) - исходный массив ?

2 вариант

почему не первый?

Стой, перепутал, 1 вариант. Потому что нужно от исходных данных прогонять все Фильтр

да, исходные данные будут лежать в data стейте, а отрисовка будет лежать в filteredData , вот такое приложение типа, обычный круд с лайв поиском . т.е. я сделал и вроде как работает , setFilteredData(filteredData.filter(...)...) . Вот только при добавлении или удалении забыл в какой стейт добавлять, в исходный (data) или фильтрованый(filteredData) . Короче надо тестить походу

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

это как? из одного стейта и рендер и фильтр ? А как потом при убирании галочки с чекбокса например, или при удалении из поиска слова, как вернуть исходные данные, если сейчас в data начальном стейте уже лежит фильтрованый массив? Начальные данные потеряны

так фильтрация никак не мутирует исходные данные, она просто возвращает массив который рендерится

так она же кладет в себя же в итоге , если рендер из нее и фильрация по ней. Был стейт data с начальными данными. Мы из него рендерим. потом делаем поиск типа с фильторами setData(data.filter...) . Все в дате теперь лежит массив например только активных карточек. Где теперь взять начальные данные, где были все карточки?)

Тебе не надо перезаписывать стейт

так зачем сетить отфильтрованные данные не пойму? что мешает взять массив и вызвать filter в ренедее?

{arr.filter(item => item.name.includes(searchString))} например выведет фильтрацию по строке

а чекбоксы и их фильтр куда писать? что за каша будет в рендере. А удаление элементов и добавление ?

какой ещё фильтр чекбоксов?

удаление добавление влияет на исходный массив, а на фильтрацию никак не влияют

чекбокс это всего лишь дополнительное условие для фильтра

выше же я нарисовал приложения макет и все расписал) Если ты ввел в поиске слово, оно там что то нашло , и нажал на чекбокс "активные" , слово в поиске осталось , и должен отработать фильтр по "активным" только еще с учетом слова поиска.

ну и что внутри filter нельзя написать два условия? или дважды вызвать filter?

там не два условия, а 3 минимум - искать по всему, искать по активным если чекбокс активных включен ,искать по не активным если чекбокс неактивно включен(одноврменно выбран только 1 чекбокс, с другого галка снимается) . Плюс эти условия надо уже вешать на хендлер для чекбоксов, т.к. при нажатии на них должен сработать поиск . Так же хендлер для самого окошка поиска с фильтром, т.к. при написании слова там - должен сработать фильтр и учитываться чекбоксы тоже. Если они выбраны искать только по ним и тд. Хз как ты хочешь сделать всё это в рендере

так хедлеры должны менять значения чекбоксов и строки ввода

а без галочек типо ничего выводиться не должно получается?) это должны быть ради кнопки, и опция "все"

Должны быть, но дизайнер видимо так видел) Без чекбоксов отрисовавается "все" , т.е. общая дата. А в рендере что map тогда не будет? Только filter ? Я чет привык что map ится из массива отрисовка и тд

а с двумя чекбоксами тоже отрисовываются "все"? что за бред)

два не работают, если установлен один, со второго снимается. Это я уже сделал в целом пофиг не стал спорить с ними

ну это полу-радио

будет, фильруешь ты данные, а мапишь разметку

да и хрен бы с ним) Меня больше волнует реализация функционала. Я сделал всё "в лоб" , т.е. два стейта - data, filteredData .Из второй в рендере map`ом отрисовка. Во вторую и сетается setFilteredData(filteredData.filter(..)..) или вроде того. Два хендлера - один на лайв поиск с таким функционалом, второй на чекбоксах. Сделано через form анта. Получаю данные с формы, например поиска . В чекбоксах там же ставлю их состояние ,form.setFieldsValue( {active: true, inactive:false}) и наоборот. Так они чекаются или не чекаются

а map после этого фильтра? для отрисовки

да, но если тебе твой вариант привычнее, то делай как удобнее, может тебе этот отфильтрованным массив ещё понадобиться где-то, тогда из рендера не вытащишь конечно

А так как я описал такое можно в прод пускать или это совсем говнокод ?

тебе на код ревью скажут)

зачем useLocalStorage нужен? может там какие-то непонятные пляски

короче проблема решилась когда я сделал await перед navigate

У меня на код ревью сеньор которому всегда все говно и можно лучше, если сделано не так как он бы сделал 😔а как сделать как он хз. Можно в 5 строчек написать говорит , а как это сделать я хз

пусть расскажет

покажи код который он критикует

так как он бы сделал, говорил же)

Он скажет образно без кода, плюс не знает всех нюансов задачи до конца , и я далеко не всегда понимаю и могу учесть все нюансы в его идее . А если писать он скажет чё я должен погружаться в твою задачу ещё полностью, или за тебя код писать ?

Вечером скину с рабочего компа

Фигня, надо просто useMemo или селекторы если это ридух

Или .map с эффектором 🤤

ну кстати да, селектор с указанием какие фильтры применены и что нужно найти и далее внутри делается обычный [].filter(); но я делал на компоненте в свое время такое где каждый новый добавленный фильтр был как функция внутри пайпа, чтобы можно было циклично вызывать .filter() и передавать туда эти коллбеки то есть был массив фильтров const filters: (() => any)[] = []; и массив исходных элементов const elements = []; ну и const filteredArray по изменению массива фильтров дёргался запуск фильтрации на исходном массиве elements и полученный результирующий стейт вставлялся в filteredArray