Estoy tratando de filtrar mis resultados a través del botón Clics en React, pero por alguna razón no funciona.
https://stackblitz.com/edit/react-x7tlxr?file=src/App.js
import React, {useEffect, useState} from "react"; import axios from 'axios'; import "./style.css"; export default function App() { const [fetchData, setFetchData] = useState([]); const [loading, setLoading] = useState(true); const [isError, setIsError] = useState(false); const url = 'https://jsonplaceholder.typicode.com/todos'; useEffect(() => { let mounted = true; const loadData = async () => { 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] ); const renderdata = () => { if (fetchData) { return ( <div>{fetchData.map(inner => { return ( <React.Fragment key={inner.id}> <p>{inner.title}</p> </React.Fragment> ) })}</div> ) } else { <p>No data to display!</p> } } const handle1 = () => { const result1 = fetchData.filter((inner) => inner.id === '1'); setFetchData(result1); } const handle2 = () => { const result2 = fetchData.filter((inner) => inner.id === '2'); setFetchData(result2); } const handleAll = () => { setFetchData(fetchData); } return ( <div> <button onClick={handleAll}>Show all</button> <button onClick={handle1}>Filter by id 1</button> <button onClick={handle2}>Filter by id 2</button> {renderdata()} </div> ); }La id es un número, no una cadena, por lo que los filtros deben cambiarse así:
const result1 = fetchData.filter((inner) => inner.id === 1);Tiene otro problema, es que cambia todo el conjunto de datos cuando filtra, por lo que una vez que haya filtrado, no puede "desfiltrar" o filtrar nuevamente en otra identificación.
Debe mantener los datos obtenidos originales fetchedData cambios.
Este ejemplo muestra cómo se puede arreglar.
Encontré 2 problemas en tu código
El ID en el resultado de la API es numérico, no una cadena inner.id === '2' . así que esto devolverá false inner.id === 2 que necesitas usar así
cuando asigna el valor filtrado a la matriz original, por supuesto, cambiará la matriz original, por lo que cuando intente filtrarla por segunda vez, no tendrá el resultado original de la API en la matriz de obtención de datos porque ya está filtrada. Así que he creado una matriz más filteredData Esto funcionará.
import React, {useEffect, useState} from "react"; import axios from 'axios'; import "./style.css"; export default function App() { const [fetchData, setFetchData] = useState([]); const [filteredData, setFileredData] = useState([]); const [loading, setLoading] = useState(true); const [isError, setIsError] = useState(false); const url = 'https://jsonplaceholder.typicode.com/todos'; useEffect(() => { let mounted = true; const loadData = async () => { try { const response = await axios(url); if (mounted) { setFetchData(response.data); setFileredData(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] ); const renderdata = () => { if (filteredData) { return ( <div>{filteredData.map(inner => { return ( <React.Fragment key={inner.id}> <p>{inner.title}</p> </React.Fragment> ) })}</div> ) } else { <p>No data to display!</p> } } const handle1 = () => { const result1 = fetchData.filter((inner) => inner.id === 1); setFileredData(result1); } const handle2 = () => { const result2 = fetchData.filter((inner) => inner.id === 2); setFileredData(result2); } const handleAll = () => { setFileredData(fetchData); } return ( <div> <button onClick={handleAll}>Show all</button> <button onClick={handle1}>Filter by id 1</button> <button onClick={handle2}>Filter by id 2</button> {renderdata()} </div> ); }