React Slick轮播响应式布局下箭头显示异常问题求助

我在NextJS项目中使用react-slick实现商品轮播，通过showPrevArrow和showNextArrow控制首尾箭头的显示状态。桌面屏幕尺寸下运行正常，但在小于1300px的小屏设备中，尚未到达轮播列表末尾时，Next按钮就会随机隐藏。怀疑问题出在箭头显示的计算逻辑上，请求排查响应式场景下的异常原因。

代码片段 #

export default function Items({ items}) {
  // other functions...

  // Slider Functions
  const [currentSlide, setCurrentSlide] = useState(0);
  const sliderRef = useRef(null);

  const settings = {
    dots: false,
    infinite: false,
    speed: 500,
    slidesToShow: 9,
    slidesToScroll: 4,
    beforeChange: (current, next) => setCurrentSlide(next),
    responsive: [
      {
        breakpoint: 1290,
        settings: {
          slidesToShow: 6,
        },
      },
      {
        breakpoint: 1024,
        settings: {
          slidesToShow: 4,
        },
      },
      {
        breakpoint: 768,
        settings: {
          slidesToShow: 3,
        },
      },
      {
        breakpoint: 480,
        settings: {
          slidesToShow: 2,
        },
      },
    ],
  };

const numItems = bannerCuisines.length;
const numSlidesToShow = settings.slidesToShow; // 问题核心所在
const numSlides = Math.ceil(numItems / settings.slidesToScroll);

const showPrevArrow = currentSlide > 0;
const showNextArrow = currentSlide + numSlidesToShow < numItems;

const handlePrevClick = () => {
  if (sliderRef.current) {
    sliderRef.current.slickPrev();
  }
};

const handleNextClick = () => {
  if (sliderRef.current) {
    sliderRef.current.slickNext();
  }
};

  return (
    <Layout>
      // other HTML code here
        <div className={styles.categories}>
        {showPrevArrow && (
            <button className={styles.prev} onClick={handlePrevClick}> Prev </button>
          )}
        <div className={styles.pane}>
          <Slider {...settings} ref={sliderRef} arrows={false}>
          {banner.map((category, index) => (
          <div className={styles.container}>
            // item contents here
          </div>
          ))}
          </Slider>
        </div>
          {showNextArrow && (
            <button className={styles.next} onClick={handleNextClick}> Next </button>
          )}   
      </div>
    </Layout>
  );
}

问题原因 #

1. 静态取值忽略响应式配置：代码中numSlidesToShow始终取settings.slidesToShow的默认值（9），完全没考虑响应式断点中不同屏幕对应的slidesToShow。比如屏幕小于1290px时，react-slick实际渲染6个商品，但计算逻辑仍按9个判断，导致currentSlide + 9轻易超过总商品数，提前隐藏Next按钮。
2. 变量不一致：numItems用的是bannerCuisines.length，但轮播渲染的是banner数组，两者数量不匹配也会引发计算异常。

解决方案 #

1. 动态获取当前生效的slidesToShow

添加状态保存当前屏幕对应的slidesToShow，监听窗口尺寸变化实时更新：

const [currentSlidesToShow, setCurrentSlidesToShow] = useState(settings.slidesToShow);

// 根据屏幕宽度匹配对应断点的slidesToShow
const getCurrentSlidesToShow = () => {
  const width = typeof window !== 'undefined' ? window.innerWidth : 1300;
  // 从大到小遍历断点，匹配当前屏幕
  for (let i = settings.responsive.length - 1; i >= 0; i--) {
    const { breakpoint, settings: responsiveSettings } = settings.responsive[i];
    if (width <= breakpoint) {
      return responsiveSettings.slidesToShow;
    }
  }
  return settings.slidesToShow;
};

// 初始化+窗口resize时更新
useEffect(() => {
  setCurrentSlidesToShow(getCurrentSlidesToShow());

  const handleResize = () => {
    setCurrentSlidesToShow(getCurrentSlidesToShow());
  };

  window.addEventListener('resize', handleResize);
  return () => window.removeEventListener('resize', handleResize);
}, []);

2. 修正箭头显示逻辑

用动态获取的currentSlidesToShow替代静态取值，同时统一变量：

// 确保numItems和渲染数组一致
const numItems = banner.length;
const showPrevArrow = currentSlide > 0;
// 用动态值判断是否还有未显示的商品
const showNextArrow = currentSlide + currentSlidesToShow < numItems;

3. 可选优化：利用react-slick内置方法

不想手动监听resize的话，可通过slider实例直接获取当前生效的配置：

useEffect(() => {
  if (sliderRef.current) {
    const currentSettings = sliderRef.current.getSlick();
    setCurrentSlidesToShow(currentSettings.options.slidesToShow);
  }
}, [currentSlide]);

验证要点 #

• 调整窗口尺寸时，检查currentSlidesToShow是否匹配响应式配置的值
• 确认numItems和渲染的banner数组是同一数据源
• 测试不同屏幕下，Next按钮是否在轮播真正到达末尾时才隐藏

内容的提问来源于stack exchange，提问作者Dae