Bagaimana untuk mencetuskan render (dengan penapis dan penomboran) pada kaedah isihan dalam React?

Question

Ini ialah komponen gaya Sort.js saya:

<SortWrapper>
    <SortText>Sort By</SortText>
    <SortSelect onChange={onSelectChange}>
      <SortOption value="vehicleMake">Vehicle make</SortOption>
      <SortOption value="vehicleModel">Vehicle model</SortOption>
    </SortSelect>
  </SortWrapper>

Ini ialah fungsi dalam App.js yang menjadikan komponen pengisihan

<Sort onSelectChange={onSelectChange} />

Ini adalah fungsi:

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

"Kenderaan" ialah pelbagai objek yang saya dapat daripada pangkalan data Firestore.

Setiap kali saya menukar nilai SortOption, ia tidak mengisih tatasusunan objek secara automatik, tetapi apabila saya mengklik pada halaman 2 dalam penomboran, dan kemudian mengklik pada halaman 1, ia menyusunnya.

Ini komponen grid saya:

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

Ini adalah fungsi penapis saya:

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

Seperti yang saya tulis sebelum ini, saya mahu kenderaan saya dipaparkan secara automatik mengikut jenama atau model, bukan apabila saya mengklik pada nombor halaman dalam penomboran.

Answer 1

Kaedah pengisihan anda sepatutnya seperti ini

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

Fungsi penapis anda sepatutnya kelihatan seperti ini

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

Pada asasnya, sebaik sahaja onSelectChange berjalan, anda mengemas kini status kenderaan dan kemudian usememo akan berjalan semula, jadi kami menambah kenderaan bergantung kepadanya