Dies ist meine Sort.js-Stilkomponente:
<SortWrapper> <SortText>Sort By</SortText> <SortSelect onChange={onSelectChange}> <SortOption value="vehicleMake">Vehicle make</SortOption> <SortOption value="vehicleModel">Vehicle model</SortOption> </SortSelect> </SortWrapper>
Dies ist die Funktion in App.js, die die Sortierkomponente rendert
<Sort onSelectChange={onSelectChange} />
Dies ist eine Funktion:
const onSelectChange = (e) => { const value = e.target.value; if (value === "VehicleMake") vehicles.sort((a, b) => a.vehicleMake.localeCompare(b.vehicleMake)); else if (value === "VehicleModel") { vehicles.sort((a, b) => a.vehicleModel.localeCompare(b.vehicleModel)); } else { vehicles.sort((a, b) => a.id - b.id); }
?Fahrzeuge“ ist ein Array von Objekten, die ich aus der Firestore-Datenbank erhalte.
Immer wenn ich den Wert von SortOption ?ndere, wird das Array von Objekten nicht automatisch sortiert. Wenn ich jedoch auf Seite 2 in der Paginierung und dann auf Seite 1 klicke, wird es sortiert.
Das ist meine Rasterkomponente:
<Grid> {vehiclesData.map((vehicle) => ( <VehicleCard id={vehicle.id} key={vehicle.id} ImageURL={vehicle.ImageURL} vehicleMake={vehicle.vehicleMake} vehicleModel={vehicle.vehicleModel} selectVehicle={() => setSelectedVehicle(vehicle)} deleteHandler={() => deleteHandler(vehicle.id)} /> ))} </Grid>
Das ist meine Filterfunktion:
const vehiclesData = useMemo(() => { let computedVehicles = vehicles; if (searchVehicle) { computedVehicles = computedVehicles.filter((vehicle) => vehicle.vehicleMake.toLowerCase().includes(searchVehicle.toLowerCase()) ); } setTotalVehicles(computedVehicles.length); return computedVehicles.slice( (currentPage - 1) * vehiclesPerPage, (currentPage - 1) * vehiclesPerPage + vehiclesPerPage );
Wie ich bereits geschrieben habe, m?chte ich, dass meine Fahrzeuge automatisch nach Marke oder Modell gerendert werden, nicht wenn ich auf die Seitenzahl in der Paginierung klicke.
你的排序方法應(yīng)該是這樣的
const onSelectChange = (e) => { let temVehicles = [...vehicles] const value = e.target.value; if (value === "VehicleMake") temVehicles .sort((a, b) => a.vehicleMake.localeCompare(b.vehicleMake)); else if (value === "VehicleModel") { temVehicles .sort((a, b) => a.vehicleModel.localeCompare(b.vehicleModel)); } else { temVehicles .sort((a, b) => a.id - b.id); } setVehicles(temVehicles )}
你的過(guò)濾函數(shù)應(yīng)該是這樣的
const vehiclesData = useMemo(() => { let computedVehicles = vehicles; if (searchVehicle) { computedVehicles = computedVehicles.filter((vehicle) => vehicle.vehicleMake.toLowerCase().includes(searchVehicle.toLowerCase()) ); } setTotalVehicles(computedVehicles.length); return computedVehicles.slice( (currentPage - 1) * vehiclesPerPage, (currentPage - 1) * vehiclesPerPage + vehiclesPerPage );},[vehicles])
基本上,一旦 onSelectChange 運(yùn)行,您就會(huì)更新車輛狀態(tài),然后 usememo 應(yīng)該再次運(yùn)行,因此我們向其中添加依賴車輛