Estoy trabajando en una interfaz de usuario basada en React JS y tengo un problema con los datos.
const [lists, setLists] = useState([]); useEffect(()=>{ const url = "https://domain/api/all"; fetch(url).then(response => response.json()).then(response=> { setLists(response.json.list); }); let [ageList, setAgeList] = useState([]); let [countryList, setcoutryList] = useState([]); useEffect(()=>{ var newList = lists.filter(e=> e.age === age); setList(newList) },[age]) useEffect(()=>{ setlist(lists.filter(e=> e.country === country)) },[country])Con este método, el primer intento de filtro funciona bien tanto por edad como por país, pero cuando cambio el valor del filtro por edad o país, obtengo una matriz vacía que se espera ya que la nueva variable de listas ha ingresado con el último país/edad filtrado.
¿Cómo puedo superar esto?
¿Tiene control sobre los datos obtenidos? Si es así, la solución obvia sería cambiar el lado del servidor del modelo de datos.
De lo contrario, sugeriría almacenar la respuesta inicial en un objeto mutable de useRef .
Editar
const [lists, setLists] = useState([]); const cache = useRef([]); useEffect(()=>{ const url = "https://domain/api/all"; fetch(url).then(response => response.json()).then(response=> { cache.current = response.json.list; setLists(response.json.list); }); });Como notó, cuando sobrescribe su estado anterior con el estado filtrado, pierde el estado anterior para siempre. La solución aquí es mantener el valor inicial de las lists y crear una nueva variable para sus listas filtradas. Algo como esto:
const [lists, setLists] = useState([]); const [ageFilter, setAgeFilter] = useState(""); const [countryFilter, setcountryFilter] = useState(""); const url = "https://domain/api/all"; fetch(url) .then(response => response.json()) .then(response=> { setLists(response.json.list); }); let filteredByCountryAndAge = listfilter((listItem) => { return (listItem.country === countryFilter && listItem.age === ageFilter); });(o como quiera que lo estés filtrando).
El punto es, no cambie el valor de las lists después de que se establezca con la lista completa. Al filtrar, asigne los criterios por los que está filtrando a las variables de estado, pero asigne los datos filtrados a una variable, NO a una variable de estado.