Estoy tratando de ordenar algunos datos en mi aplicación. Me gustaría apoyar las siguientes opciones:
Parece que la clasificación de precios está funcionando. Sin embargo, cuando hago clic en "kilometraje más bajo", sigue mostrando los resultados de precio más alto: el valor anterior de sorting . useEffect , pero no pude hacerlo funcionar. Aquí está mi código:
App.js
const [carList, setCarList] = useState(cars) const [sorting, setSorting] = useState("pricelow") const handleSort = (e) => { setSorting(e.target.value) if (sorting === "pricelow"){ const newlist = carList.sort((a,b) => { return parseInt(b.carPrice) - parseInt(a.carPrice) }) setCarList(newlist) } if (sorting === "pricehigh"){ const newlist = carList.sort((a,b) => { return parseInt(a.carPrice) - parseInt(b.carPrice) }) setCarList(newlist) } if (sorting === "kmlow"){ const newlist = carList.sort((a,b) => { return parseInt(a.carMileage) - parseInt(b.carMileage) }) setCarList(newlist) } } AdsList.js
<select className="form-select w-25" onChange={handleSort} value={sorting}> <option value="pricelow">Sort By Lowest Price</option> <option value="pricehigh">Sort By Highest Price</option> <option value="kmlow">Sort By Lowest Km</option> <option value="kmhigh">Sort By Highest Km</option> </select>Esto sucede porque setSorting no cambia el valor de sorting de inmediato, sino que espera hasta que el componente se vuelve a procesar. Consulte https://reactjs.org/docs/react-component.html#setstate
Haz esto en su lugar:
const [sorting, setSorting] = useState("pricelow") const handleSort = (e) => { const sortValue = e.target.value; setSorting(sortValue) if (sortValue === "pricelow"){ const newlist = carList.sort((a,b) => { return parseInt(b.carPrice) - parseInt(a.carPrice) }) setCarList(newlist) } if (sortValue === "pricehigh"){ const newlist = carList.sort((a,b) => { return parseInt(a.carPrice) - parseInt(b.carPrice) }) setCarList(newlist) } if (sortValue === "kmlow"){ const newlist = carList.sort((a,b) => { return parseInt(a.carMileage) - parseInt(b.carMileage) }) setCarList(newlist) } } Otro consejo, use un switch/case para un código más limpio.
La función setSort no establecerá el valor al instante. solo cambia el valor en el próximo render
el mejor método es usar el gancho useEffect
const [carList, setCarList] = useState(cars) const [sorting, setSorting] = useState("pricelow") useEffect(()=> { if (sorting === "pricelow"){ const newlist = carList.sort((a,b) => { return parseInt(b.carPrice) - parseInt(a.carPrice) }) setCarList(newlist) } if (sorting === "pricehigh"){ const newlist = carList.sort((a,b) => { return parseInt(a.carPrice) - parseInt(b.carPrice) }) setCarList(newlist) } if (sorting === "kmlow"){ const newlist = carList.sort((a,b) => { return parseInt(a.carMileage) - parseInt(b.carMileage) }) setCarList(newlist) } },[sorting]) <select className="form-select w-25" onChange={(e)=>setSorting(e.target.value)} value={sorting}> <option value="pricelow">Sort By Lowest Price</option> <option value="pricehigh">Sort By Highest Price</option> <option value="kmlow">Sort By Lowest Km</option> <option value="kmhigh">Sort By Highest Km</option> </select>