React-multi-carousel ne s'actualise pas correctement lorsque les données d'entrée changent

Question

Je construis ma première application MERN full stack et j'ai une "petite" question sur le package React-multi-carousel.

Voici la capture d'écran du recto (c'est la section agenda où vous pouvez voir tous les agendas du mois sélectionné (mois sélectionné et mois précédent)) :

Voici mon code : from Diary-Container-Component (c'est là que survient le problème et en utilisant le carrousel)

import React, { useEffect, useState } from "react";
import { Link } from "react-router-dom";
import Wrapper from "../assets/wrappers/DiaryContainer.js";
import { useSelector } from "react-redux";
import { SingleDiaryEntryDisplay, Loading } from "../components";
import Carousel from "react-multi-carousel";
import "react-multi-carousel/lib/styles.css";
import { useGetAllDiaryQuery } from "../features/api/apiSlice.js";

//carousel
const responsive = {
  superLargeDesktop: {
    // the naming can be any, depends on you.
    breakpoint: { max: 4000, min: 3000 },
    items: 5,
  },
  desktop: {
    breakpoint: { max: 3000, min: 1024 },
    items: 3,
  },
  tablet: {
    breakpoint: { max: 1024, min: 464 },
    items: 2,
  },
  mobile: {
    breakpoint: { max: 464, min: 0 },
    items: 1,
  },
};

const DiaryContainer = ({ lastMonth }) => {
  let { searchValuesDiary } = useSelector((store) => store.allDiary);
  let [localSearchValuesDiary, setLocalSearchValuesDiary] =
    useState(searchValuesDiary);

  // for lastMonth

  const {
    data: diaries,
    refetch,
    isLoading,
    isSuccess,
    isFetching,
    isError,
    error,
  } = useGetAllDiaryQuery(localSearchValuesDiary);

  useEffect(() => {
    setLocalSearchValuesDiary({ ...searchValuesDiary });
    if (lastMonth) {
      setLocalSearchValuesDiary({ ...searchValuesDiary, month: lastMonth });
    }
    refetch();
  }, [searchValuesDiary]);

  if (isLoading || isFetching) {
    <Loading center />;
  }

  // diaries && (diaries.result.length < 4 ? false : true);
  console.log(
    diaries && diaries.result.length,
    `length in diaryContainer ${lastMonth ? "lastmonth" : "month"} `
  );
  if (isSuccess) {
    if (diaries.result.length <= 0) {
      return (
        <Wrapper>
          <div className="no-diaries-container">
            <h2>...no diary entries</h2>
          </div>
        </Wrapper>
      );
    }
    return (
      <Wrapper>
        <div className="diary-container">
          <div className="this-month">
            {
              <Carousel
                key={lastMonth ? "Carousel-Last-Month" : "Carousel-First-Month"}
                className="carousel"
                responsive={responsive}
                showDots={diaries && (diaries.result.length < 4 ? false : true)}
              >
                {diaries.result.map((diary) => {
                  const {
                    diaryTitle,
                    mood,
                    performance,
                    createdAt,
                    text,
                    _id: diaryId,
                  } = diary;

                  return (
                    <SingleDiaryEntryDisplay
                      key={diaryId}
                      diaryId={diaryId}
                      title={diaryTitle}
                      createdAt={createdAt}
                      mood={mood}
                      performance={performance}
                      text={text}
                    />
                  );
                })}
              </Carousel>
            }
          </div>
        </div>
      </Wrapper>
    );
  }
};

export default DiaryContainer;

J'ai également modifié la position du point et de la flèche dans le CSS (mais même après avoir supprimé cette personnalisation, le problème persiste. Je pense donc que cela n'a rien à voir avec l'erreur).

Erreur : Chaque fois que je change le filtre de juin à mai (donc dans la section inférieure, le mois change de mars à avril), avril n'affiche plus aucun point ni flèche, malgré environ 10 éléments.

Lorsque j'actualise la page et sélectionne Mai, cela fonctionne bien et quand je veux entre les mois (sauf le changement de juin à mai).

Lorsque je supprime cet extrait de code (diaries && (diaries.result.length < 4 ? false : true) et que j'utilise simplement true , l'application se brise même et donne le résultat : Longueur de tableau invalide Le point de composant ne peut pas être chargé.

Pour moi, le carrousel ne semble pas être actualisé/rendu correctement.

Ainsi, lorsque juin est sélectionné, il n'y a qu'un seul élément en bas pour mai (le point et la flèche ne doivent donc pas être affichés). Ensuite, lorsque je passe en mai, avril est maintenant en bas, l'ensemble de données injecté est correct (il montre les éléments d'avril), mais maintenant les points et les flèches sont toujours désactivés, mais comme il y a 10 éléments, il devrait être activé.

J'ai essayé beaucoup de récupérations dans les hooks useEffect et setState pour forcer le rendu et l'actualisation correctement, mais le carrousel ne s'actualise pas.

J'ai même placé un accessoire clé sur presque tous les composants. Mais le bug existe toujours.

Quelqu'un a-t-il une solution à ce problème ? Peut-être que mon code est si mal structuré (je suis débutant) que cette erreur n'est pas connue en production.

Merci beaucoup pour votre aide.

Answer 1

Vous pouvez créer un if à l'intérieur d'une constante réactive, par exemple

superLargeDesktop: {
    breakpoint: { max: 4000, min: 3000 },
    items: data.length < 5 ? data.length : 5, 
  },

J'ai eu un problème similaire mais j'ai utilisé des points personnalisés, Si le code ci-dessus ne fonctionne pas essayez ceci et dans la constante carouselItem (fournisseur de carrousel multi React dans l'exemple, voir la documentation), essayez Utiliser un tableau avec des nombres plus petits que la variable data, quelque chose comme const carouselItems = [''] , quand mon fichier ressemble à ceci

export const CustomDot = ({ onClick = () => {}, ...rest }) => {
  const {
    onMove,
    index,
    active,
    carouselState: { currentSlide, deviceType },
    data,
  } = rest;
//here you choose the number  equal or smaller than your data length, like 1
  const carouselItems = [''];
  // onMove means if dragging or swiping in progress.
  // active is provided by this lib for checking if the item is active or not.
  return (
    <button
      className={active ? "active" : "inactive"}
      onClick={() => onClick()}
    >
            {React.Children.toArray(carouselItems)[index]}
    </button>
  );
};