亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱

Wie l?st man das Rendern (mit Filter und Paginierung) für die Sortiermethode in React aus?
P粉970736384
P粉970736384 2024-04-06 21:28:37
0
1
3040

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.

P粉970736384
P粉970736384

Antworte allen(1)
P粉790819727

你的排序方法應(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)行,因此我們向其中添加依賴車輛

Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage