React-Multi-Carousel wird nicht korrekt aktualisiert, wenn sich Eingabedaten ändern

Question

Ich baue meine erste Full-Stack-MERN-App und habe eine „kleine“ Frage zum React-Multi-Carousel-Paket.

Hier ist der Screenshot von vorne (es ist der Tagebuchbereich, in dem Sie alle Tagebücher für den ausgewählten Monat (ausgewählter Monat und vorheriger Monat) sehen können):

Das ist mein Code: von Diary-Container-Component (hier tritt das Problem auf und ich verwende Karussell)

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;

Ich habe auch die Punkt- und Pfeilposition im CSS geändert (aber selbst nach dem Entfernen dieser Anpassung tritt das Problem weiterhin auf. Ich denke also, dass es nichts mit dem Fehler zu tun hat).

Fehler: Jedes Mal, wenn ich den Filter von Juni auf Mai ändere (also im unteren Bereich der Monat von März auf April wechselt), werden im April jetzt keine Punkte oder Pfeile mehr angezeigt, obwohl es etwa 10 Elemente gibt.

Wenn ich die Seite aktualisiere und Mai auswähle, funktioniert es einwandfrei und wann immer ich möchte zwischen den Monaten (mit Ausnahme der Änderung von Juni auf Mai).

Wenn ich dieses Code-Snippet (diaries && (diaries.result.length < 4 ? false : true) entferne und einfach true verwende, bricht die App sogar ab und gibt die Ausgabe aus: Ungültige Array-Länge. Komponentenpunkt kann nicht geladen werden.

Für mich scheint das Karussell nicht richtig aktualisiert/gerendert zu werden.

Wenn also Juni ausgewählt ist, gibt es unten nur ein Element für Mai (daher sollten der Punkt und der Pfeil nicht angezeigt werden). Wenn ich dann zu Mai wechsle, ist April jetzt ganz unten, der eingefügte Datensatz ist korrekt (er zeigt Elemente für April), aber jetzt sind die Punkte und Pfeile immer noch deaktiviert, aber da es 10 Elemente gibt, sollte es aktiviert sein.

Ich habe viele Neuabrufe in den Hooks „useEffect“ und „setState“ versucht, um ein korrektes erneutes Rendern und Aktualisieren zu erzwingen, aber das Karussell wird nicht aktualisiert.

Ich habe sogar an fast jeder Komponente eine Schlüsselstütze angebracht. Aber der Fehler besteht immer noch.

Hat jemand eine Lösung für dieses Problem? Möglicherweise ist mein Code so schlecht strukturiert (ich bin Anfänger), dass dieser Fehler in der Produktion nicht bekannt ist.

Vielen Dank für Ihre Hilfe.

Answer 1

你可以在响应式常量中创建一个if，例如

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

我有类似的问题，但我使用了自定义点，如果上面的代码不起作用尝试这个并在常量carouselItem （示例中的 React multi carousel 提供程序，请参阅文档），尝试使用数字小于数据变量的数组，类似于 const carouselItems = ['']; ，当我的文件看起来如下时

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