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

這是我的 Sort.js 樣式組件：

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

這是 App.js 中的函數(shù)，其中渲染排序組件

<Sort onSelectChange={onSelectChange} />

這是一個(gè)函數(shù)：

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

“車輛”是我從 Firestore 數(shù)據(jù)庫(kù)獲取的對(duì)象數(shù)組。

每當(dāng)我更改 SortOption 的值時(shí)，它都不會(huì)自動(dòng)對(duì)對(duì)象數(shù)組進(jìn)行排序，但當(dāng)我單擊分頁(yè)中的第 2 頁(yè)，然后單擊第 1 頁(yè)時(shí)，它會(huì)對(duì)其進(jìn)行排序。

這是我的網(wǎng)格組件：

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

這是我的過濾功能：

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

正如我之前所寫，我希望我的車輛按品牌或型號(hào)自動(dòng)渲染，而不是在我單擊分頁(yè)中的頁(yè)碼時(shí)渲染。