首页  >  问答  >  正文

当输入数据更改时,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粉057869348287 天前620

全部回复(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
  • 取消回复