React-multi-carousel tidak dimuat semula dengan betul apabila data input berubah

Question

Saya sedang membina MERN-App tindanan penuh pertama saya dan mempunyai soalan "sedikit" tentang pakej React-multi-carousel.

Berikut ialah tangkapan skrin dari hadapan (ia adalah bahagian diari di mana anda boleh melihat semua diari untuk bulan yang dipilih (bulan yang dipilih dan bulan sebelumnya)):

Ini adalah kod saya: dari Diary-Container-Component (di sinilah masalah timbul dan menggunakan karusel)

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;

Saya juga mengubah suai kedudukan titik dan anak panah dalam css (tetapi walaupun selepas mengalih keluar penyesuaian ini, masalah masih berlaku. Jadi saya fikir ia tidak ada kena mengena dengan ralat).

Ralat: Setiap kali apabila saya menukar penapis dari Jun ke Mei (jadi di bahagian bawah, bulan berubah dari Mac ke April), April kini tidak menunjukkan sebarang titik atau anak panah, walaupun mempunyai kira-kira 10 item.

Apabila saya memuat semula halaman dan memilih Mei ia berfungsi dengan baik dan apabila saya mahu antara bulan (kecuali perubahan dari Jun hingga Mei).

Apabila saya mengalih keluar coretan kod ini (diaries && (diaries.result.length < 4 ? false : true) dan hanya menggunakan true , apl itu akan pecah dan memberikan output: Panjang tatasusunan tidak sah Titik komponen tidak boleh dimuatkan.

Bagi saya, karusel nampaknya tidak menyegarkan/menyampaikan semula dengan betul.

Jadi apabila Jun dipilih, hanya ada satu item di bahagian bawah untuk bulan Mei (jadi titik dan anak panah tidak boleh dipaparkan). Kemudian apabila saya menukar kepada Mei, April kini berada di bahagian bawah, set data yang disuntik adalah betul (ia menunjukkan item untuk April), tetapi kini titik dan anak panah masih dilumpuhkan, tetapi kerana terdapat 10 item, ia harus Dayakan.

Saya mencuba banyak pengambilan semula dalam useEffect dan cangkuk setState untuk memaksa perenderan semula dan muat semula dengan betul, tetapi karusel tidak dimuat semula.

Saya juga meletakkan penyangga kunci pada hampir setiap komponen. Tetapi pepijat masih wujud.

Ada sesiapa ada penyelesaian untuk masalah ini? Mungkin kod saya tidak berstruktur (saya seorang pemula) sehingga ralat ini tidak diketahui dalam pengeluaran.

Terima kasih banyak atas bantuan anda.

Answer 1

Anda boleh membuat if di dalam pemalar reaktif, contohnya

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

Saya mengalami masalah yang sama tetapi saya menggunakan mata tersuai, Jika kod di atas tidak berfungsi cuba ini dan dalam pemalar carouselItem< /strong> (React multi carousel provider dalam contoh, lihat dokumentasi), cuba Gunakan tatasusunan dengan nombor yang lebih kecil daripada pembolehubah data, sesuatu seperti const carouselItems = [''] , apabila fail saya kelihatan seperti ini

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