当输入数据更改时，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>
  );
};