Tengo dos selecciones que se supone que filtran datos, funcionan pero por separado, ¿cómo hago para que filtren datos juntos?
Cuando hago clic en la segunda selección, restablece los datos de la primera. Filtran la misma matriz de datos, por lo que el resultado es nuevo todo el tiempo, no entiendo cómo filtrar una matriz ya filtrada
¿Cómo hago un filtro de juntas?
//filter data const [allData, setAllData] = useState<ICompanie[]>(companiesData); // status filter const handleStatusFilter = (status: string): void => { const filterData = companiesData.filter((item) => { if (item.status === status) { return item; } }); setAllData(filterData); }; // category filter const handleCategoriesFilter = (category: string): void => { const filterData = companiesData.filter((item) => { if (item.category === category) { return item; } }); setAllData(filterData); };Eso sucede porque allData es constante y cuando invoca setAllData , siempre aplica el filtro del inmutable allData y pierde la actualización. Vea si desea exponer filterData en su lugar (por ejemplo, cambie allData a non const y asígnele filterData cuando filtre, tal vez tenga un mecanismo para restaurar el allData original sin filtrar).
Creo que debe mantener el valor de filtro ya seleccionado en la variable de estado. Prefiera el siguiente código:
const [allData, setAllData] = useState<ICompanie[]>(companiesData); const [filters, setFilters] = useState({}); //name = status/category //value = actual value of filter const handleFilter = (name:string, value:string) => { const filtersCopy = {...filters}; filtersCopy[name] = value; const filtersKey = Object.keys(filtersCopy).filter((value)=>!!filtersCopy[value]); const filterData = companiesData.filter((item) => { const filterCheck = [] filtersKey.forEach((value) => { if(item[value] === filtersCopy[value]) { filtercheck.push(value); } }) return filterCheck.length === filtersKey.length }); setFilters(filtersCopy) setAllData(filterData); }