Tengo un componente que obtiene datos y luego configuro esos datos a través del estado. Si quiero filtrar esos datos según ciertos criterios o campos de la API, ¿haría el método de filtro? ¿O esto no es aconsejable para objetos de estado?
https://stackblitz.com/edit/react-x7tlxr?file=src/App.js
Hasta ahora estoy haciendo esto: pero no funciona porque el filtrado no ocurre.
const [fetchData, setFetchData] = React.useState<any>([]); const [loading, setLoading] = React.useState<boolean>(true); const [isError, setIsError] = React.useState<boolean>(false); const url: string = 'https://xxxxxx'; useEffect(() => { let mounted = true; const loadData = async (): Promise<any> => { try { const response = await axios(url); if (mounted) { setFetchData(response.data); setLoading(false); setIsError(false); console.log('data mounted') } } catch (err) { setIsError(true) setLoading(false); setFetchData([]); console.log(err); } }; loadData(); return () => { mounted = false; console.log('cleaned'); }; }, [url] ); Función para filtrar según onClick :
onClick={(idx: number) => { const resultInnerNew = fetchData.filter((statusPoint: any) => statusPoint.status === 'New'); setFetchData(resultInnerNew) }enlace a la plantilla:
{isError ? <p className="mt-5">There is an error fetching the data!</p> : <div className="container"></div>} {loading ? <div>Loading ...</div> : <div className="cards row card-container mt-5"> // data here </div> }Puede usar una función de flecha para actualizar el estado y filtrar los datos como se muestra a continuación,
onClick={(idx: number) => { setFetchData(data => data.filter(statusPoint => statusPoint.status === 'New') }} Una revisión rápida de Array.prototype.filter() , este código solo mantendrá los valores que tienen statusPoint.status igual a 'Nuevo' en su matriz.