Bagaimana untuk mencetuskan render (dengan penapis dan penomboran) pada kaedah isihan dalam React?
P粉970736384
P粉970736384 2024-04-06 21:28:37
0
1
2512

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.

P粉970736384
P粉970736384

membalas semua(1)
P粉790819727

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

Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan