Estoy trabajando en una aplicación en la que, al cargar el componente después de obtener la API GET, se muestra una lista de automóviles al usuario. También hay varias casillas de verificación que permiten al usuario filtrar los datos mostrados. Estoy filtrando los resultados según el valor de la casilla de verificación seleccionada, pero el problema es que no sé cómo mostrar primero la lista completa de autos, y solo luego los resultados filtrados (si el usuario selecciona cualquier casilla de verificación). mi código es:
import React, { useState, useEffect } from "react"; export default function CarsMain() { const [filterList] = useState([ { value: "BMW" }, { value: "Hyundai" }, { value: "Mercedes" } ]); const [data, setData] = useState([]); const [filteredData, setFilteredData] = useState([]); useEffect(() => { fetch(url) .then(function (response) { return response.json(); }) .then(function (res) { setData(res); }) .catch(function (e) { console.log(e); }) ); }, []); function handleCheckbox(value, e) { if (e.target.checked) { let selectedData = data.filter((d) => d.model === value); setFilteredData([...filteredData, ...selectedData]); } else { let unselected = filteredData.filter((d) => { return d.model !== value; }); setFilteredData(uncheckedData); } } return ( <div > {filterList?.map((v) => { return ( <div key={v.model}> <input type="checkbox" onChange={(e) => handleCheckbox(v.model, e)} /> </div> ); })} </div> {filteredData.map((d) => {d.model}) </div> </div> </div> ); }La selección de la casilla de verificación funciona bien, cuando se selecciona BMV, solo se muestran los autos con el modelo === "BMV", el problema es que cuando se carga la página no se muestran datos, solo después de seleccionar una de las casillas de verificación, la lista de autos sería se visualizará. Parece que no puedo entender cómo mostrar la lista completa en la carga de la página y luego los datos filtrados (cuando/si el usuario selecciona la casilla de verificación). Estoy mapeando sobre datos filtrados porque si mapeo sobre datos (almacenados desde API), la selección de la casilla de verificación no funciona. ¿Cómo puedo mostrar los datos recibidos de la API en la carga de la página y cuando no se selecciona ninguna casilla de verificación, y solo se seleccionan los modelos de automóviles después de que el usuario hace clic en la casilla de verificación? Cualquier ayuda y consejo son muy apreciados.
Inicialmente, cuando no hay casillas de verificación seleccionadas, desea mostrar la lista completa, puede actualizar useEffect para almacenar todos los datos res en la matriz de estado filteredData . De esa manera, inicialmente, cuando no se selecciona ninguna casilla de verificación, todos los datos se representarán en la pantalla en la función de mapa.
useEffect(() => { fetch(url) .then(function (response) { return response.json(); }) .then(function (res) { setData(res); setFilteredData(res) }) .catch(function (e) { console.log(e); }) ); }, []); También debe actualizar la función handleCheckbox , en caso de que el usuario seleccione cualquier casilla de verificación por primera vez, no necesitamos desestructurar la matriz de datos filteredData , de lo contrario habrá duplicados. Podemos verificar por primera vez la selección de la casilla de verificación comparando la longitud de filteredData y data .
function handleCheckbox(value, e) { if (e.target.checked) { let selectedData = data.filter((d) => d.model === value); setFilteredData(filteredData.length && filteredData.length === data.length ? [...selectedData] : [...filteredData, ...selectedData]); } else { let unselected = filteredData.filter((d) => { return d.model !== value; }); setFilteredData(uncheckedData); } }intente agregar datos a la matriz de dependencias useEffect
useEffect(() => { ... }, [data]);