當輸入資料變更時，React-multi-carousel 無法正確刷新

Question

我正在建立我的第一個全端 MERN-App，並且對 React-multi-carousel 套件有一個「小」問題。

這是正面的螢幕截圖（它是日記部分，您可以在其中查看所選月份的所有日記（所選月份和上個月））：

這是我的程式碼：來自 Diary-Container-Component （這是問題出現並使用輪播的地方）

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;

我還修改了 css 中的點和箭頭位置（但即使刪除了此自定義，問題仍然發生。所以我認為它與錯誤無關）。

錯誤： 每次當我將過濾器從六月更改為五月時（因此在底部部分，月份從三月更改為四月），儘管有大約 10 個項目，但四月現在沒有顯示任何點或箭頭。

當我刷新頁面並選擇五月時，其工作正常，並且當我希望在幾個月之間時（除了從六月到五月的變化）。

當我刪除此程式碼片段(diaries && (diaries.result.length < 4 ? false : true) 並且只使用true 時，該應用程式甚至會中斷並給出輸出：數組長度無效元件點無法載入.

對我來說，輪播似乎沒有正確刷新/重新渲染。

因此，當選擇六月時，五月的底部只有一項（因此不應顯示點和箭頭）。然後，當我更改為5 月時，4 月現在位於底部，注入的數據集是正確的（它顯示4 月的項目），但現在點和箭頭仍然處於禁用狀態，但由於有10 個項目，應該啟用。

我在 useEffect 和 setState 掛鉤中嘗試了很多重新獲取，以強制重新渲染和正確刷新，但輪播不刷新。

我甚至在幾乎每個組件上都放置了一個關鍵道具。但Bug仍然存在。

有人有辦法解決這個問題嗎？也許是我的程式碼結構太糟糕（我是初學者），以至於這個錯誤在生產中不為人所知。

非常感謝您的幫忙。

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