我正在构建我的第一个全栈 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> ); };