搜尋

首頁  >  問答  >  主體

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

我正在建立我的第一個全端 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仍然存在。

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

非常感謝您的幫忙。

P粉057869348P粉057869348305 天前643

全部回覆(1)我來回復

  • P粉764003519

    P粉7640035192024-01-29 19:19:35

    你可以在響應式常數中建立一個if,例如

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

    我有類似的問題,但我使用了自訂點如果上面的程式碼不起作用嘗試這個並在常數carouselItem< /strong> (範例中的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>
      );
    };

    回覆
    0
  • 取消回覆