React useEffect 中实现循环轮播：避免闭包陷阱与优化索引管理

import { useEffect, useRef, useState } from 'react';

export default function SOCarousel({ testimonials }) {
  // 初始索引，注意这里是局部变量
  let maxIndex = 2;

  // 使用 useState 管理当前显示的轮播项
  const [currentTestimonials, setCurrentTestimonials] = useState([
    testimonials[maxIndex - 2],
    testimonials[maxIndex - 1],
    testimonials[maxIndex],
  ]);

  // 使用 useRef 存储 currentTestimonials 的最新引用，解决闭包问题
  const currentTestimonialsRef = useRef(currentTestimonials);

  useEffect(() => {
    const interval = setInterval(() => {
      // 每次 interval 触发时，更新 ref 的值
      currentTestimonialsRef.current = [
        testimonials[maxIndex - 2],
        testimonials[maxIndex - 1],
        testimonials[maxIndex],
      ];

      // 判断是否到达 testimonials 数组的末尾
      // 使用 .at(-1) 安全访问最后一个元素
      if (
        currentTestimonialsRef.current.at(-1) && // 确保元素存在
        currentTestimonialsRef.current.at(-1).localeCompare(testimonials.at(-1)) === 0
      ) {
        console.log('HERE: Reached end of testimonials, resetting index.');
        maxIndex = 2; // 重置索引到开头
      } else {
        console.log('ADD THREE: Advancing index.');
        maxIndex += 3; // 否则前进3个索引
      }

      // 更新 ref.current 以反映新的轮播项
      currentTestimonialsRef.current = [
        testimonials[maxIndex - 2],
        testimonials[maxIndex - 1],
        testimonials[maxIndex],
      ];

      // 触发组件重新渲染，显示最新的轮播项
      setCurrentTestimonials(currentTestimonialsRef.current);
    }, 1000);

    // 清理函数，在组件卸载时清除定时器
    return () => clearInterval(interval);
  }, [testimonials]); // 依赖项中包含 testimonials，确保当 testimonials 变化时 useEffect 重新运行

  return (
    <div className='carosel-container flex'>
      {currentTestimonials.map((testimonial, index) => (
        <div className='testimonial' key={index}> {/* 添加 key 提高性能 */}
          <p>{testimonial}</p>
        </div>
      ))}
    </div>
  );
}

import { useEffect, useState } from 'react';

export default function Carousel({ testimonials }) {
  // 使用 useState 管理当前显示的起始索引
  const [startIndex, setStartIndex] = useState(0); // 从第一个元素开始

  // 根据 startIndex 计算当前要显示的三个轮播项
  const currentTestimonials = [
    testimonials[startIndex],
    testimonials[startIndex + 1],
    testimonials[startIndex + 2],
  ].filter(Boolean); // 过滤掉可能存在的 undefined，以防数组末尾不足3项

  useEffect(() => {
    const interval = setInterval(() => {
      // 计算下一个起始索引
      let nextStartIndex = startIndex + 3;

      // 如果下一个起始索引超出了数组范围，则重置为 0，实现循环
      // 注意：这里需要考虑 testimonials 数组的实际长度和每次展示的项数
      // 确保 nextStartIndex 不会越界到无法取到足够项
      if (nextStartIndex >= testimonials.length) {
        console.log('Reached end of testimonials, resetting to start!');
        nextStartIndex = 0; // 重置到开头
      }

      // 更新 startIndex，这将触发组件重新渲染，并更新 currentTestimonials
      setStartIndex(nextStartIndex);
    }, 1000);

    // 清理函数
    return () => clearInterval(interval);
  }, [startIndex, testimonials]); // 依赖项中包含 startIndex 和 testimonials

  return (
    <div className='carousel-container flex'>
      {currentTestimonials.map((testimonial, index) => (
        <div className='testimonial' key={index}>
          <p>{testimonial}</p>
        </div>
      ))}
    </div>
  );
}

import { useEffect, useState } from 'react';

export default function Carousel({ testimonials }) {
  // 使用 useState 存储当前显示的轮播项，而不是索引
  const [displayedTestimonials, setDisplayedTestimonials] = useState([]);

  useEffect(() => {
    // 初始索引，在 useEffect 闭包内维护
    let currentIndex = 0; 

    // 初始化第一次显示的轮播项
    setDisplayedTestimonials([
      testimonials[currentIndex],
      testimonials[currentIndex + 1],
      testimonials[currentIndex + 2],
    ].filter(Boolean));

    const interval = setInterval(() => {
      // 每次前进3个索引
      currentIndex += 3;

      // 如果超出数组长度，则重置回开头
      if (currentIndex >= testimonials.length) {
        currentIndex = 0;
      }

      // 根据新的 currentIndex 更新显示的轮播项
      setDisplayedTestimonials([
        testimonials[currentIndex],
        testimonials[currentIndex + 1],
        testimonials[currentIndex + 2],
      ].filter(Boolean)); // 过滤 undefined，确保数组末尾不足3项时不出错

    }, 1000);

    return () => clearInterval(interval);
  }, [testimonials]); // 仅当 testimonials 数组变化时才重新设置定时器

  return (
    <div className='carousel-container flex'>
      {displayedTestimonials.map((testimonial, index) => (
        <div className='testimonial' key={index}>
          <p>{testimonial}</p>
        </div>
      ))}
    </div>
  );
}