Comment déclencher le rendu (avec filtre et pagination) sur la méthode de tri dans React ?

Question

Voici mon composant de style Sort.js :

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

C'est la fonction d'App.js qui restitue le composant de tri

<Sort onSelectChange={onSelectChange} />

C'est une fonction :

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

"Véhicules" est un tableau d'objets que je récupère de la base de données Firestore.

Chaque fois que je modifie la valeur de SortOption, il ne trie pas automatiquement le tableau d'objets, mais lorsque je clique sur la page 2 dans la pagination, puis sur la page 1, il le trie.

Voici mon composant de grille :

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

Voici ma fonction de filtre :

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

Comme je l'ai déjà écrit, je souhaite que mes véhicules s'affichent automatiquement par marque ou modèle, et non lorsque je clique sur le numéro de page dans la pagination.

Answer 1

Votre méthode de tri devrait être comme ceci

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

Votre fonction de filtre devrait ressembler à ceci

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

Fondamentalement, une fois que onSelectChange s'exécute, vous mettez à jour l'état du véhicule, puis usememo devrait s'exécuter à nouveau, nous y ajoutons donc le véhicule dépendant