我正在建立我的第一個全端 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粉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> ); };