Quiero filtrar mi matriz de objetos, que obtuve de DB.
const [loadedCars, setLoadedCars] = useState(); useEffect(() => { setLoading(true); axios .get(process.env.REACT_APP_BACKEND_URL + "/cars/", { headers: { Authorization: "Bearer " + auth.token, "Content-Type": "application/json", }, }) .then((res) => { console.log(res.data.cars); setLoadedCars(res.data.cars); setLoading(false); }); }, [auth.token]);A mi código de búsqueda le gusta eso
let checker = (src, target) => target.every((v) => src.includes(v)); const searchHandler = (e) => { e.preventDefault(); setDates(share.date_ranges); const filtered = loadedCars.filter((item) => !checker(item.dates, share.date_ranges)); console.log(filtered); setLoadedCars(filtered) }; <Button onClick={searchHandler} className="search-btn" inverse>Search</Button>El filtro funciona solo una vez. Cuando quiero buscar varias veces, no se actualiza. Y al final mi matriz de objetos quedó vacía.
¿Cómo puedo actualizar mi estado? Gracias por la ayuda.
Esto sucede porque está escribiendo los resultados de su filtro en loadedCars , luego, cuando busca nuevamente, usa la misma matriz filtrada. Sugerencia: necesita dos constantes aquí, una para la respuesta de la base de datos y otra que contenga su búsqueda filtrada.
Necesitas usar dos estados. Primero para todos los autos, segundo para autos filtrados
const [loadedCars, setLoadedCars] = useState(); const [dbCars, setDbCars] = useState(); useEffect(() => { setLoading(true); axios .get(process.env.REACT_APP_BACKEND_URL + "/cars/", { headers: { Authorization: "Bearer " + auth.token, "Content-Type": "application/json", }, }) .then((res) => { console.log(res.data.cars); setLoadedCars(res.data.cars); setDbCars(res.data.cars); setLoading(false); }); }, [auth.token]); let checker = (src, target) => target.every((v) => src.includes(v)); const searchHandler = (e) => { e.preventDefault(); setDates(share.date_ranges); const filtered = dbCars.filter((item) => !checker(item.dates, share.date_ranges)); console.log(filtered); setLoadedCars(filtered) }; <Button onClick={searchHandler} className="search-btn" inverse>Search</Button>