Wie löst man das Rendern (mit Filter und Paginierung) für die Sortiermethode in React aus?

Question

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.

Answer 1

你的排序方法应该是这样的

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 )}

你的过滤函数应该是这样的

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 运行，您就会更新车辆状态，然后 usememo 应该再次运行，因此我们向其中添加依赖车辆