React useEffect 中数组循环与状态管理：避免闭包陷阱与索引问题

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

export default function SOCarousel({ testimonials }) {
  // maxIndex 应该作为状态管理，或者在 useEffect 内部作为局部变量维护，
  // 避免在组件顶层声明的 let 变量在每次渲染时被重置的问题。
  // 在此示例中，我们将其放在 useEffect 内部。
  // 或者，如果 maxIndex 需要跨渲染保持，可以考虑 useState 或 useRef。
  // 为简化，我们将其视为 useEffect 内部的局部变量，并在每次循环中更新。

  const [currentTestimonials, setCurrentTestimonials] = useState(() => [
    testimonials[0],
    testimonials[1],
    testimonials[2],
  ]);

  // 使用 useRef 创建一个可变的引用，用于存储 currentTestimonials 的最新值
  const currentTestimonialsRef = useRef(currentTestimonials);

  useEffect(() => {
    // 确保 ref.current 总是最新的 currentTestimonials 值
    currentTestimonialsRef.current = currentTestimonials;
  }, [currentTestimonials]); // 当 currentTestimonials 变化时更新 ref

  useEffect(() => {
    let maxIndex = 2; // 将 maxIndex 声明在 useEffect 内部，避免外部变量重置问题

    const interval = setInterval(() => {
      // 通过 currentTestimonialsRef.current 访问最新的状态
      // 使用 .at(-1) 方法安全地访问数组最后一个元素
      if (
        currentTestimonialsRef.current.at(-1) && // 确保元素存在
        currentTestimonialsRef.current.at(-1).localeCompare(testimonials.at(-1)) === 0
      ) {
        console.log('HERE: Reached end of testimonials, resetting.');
        maxIndex = 2; // 重置索引
      } else {
        console.log('ADD THREE: Moving to next set.');
        maxIndex += 3;
      }

      // 检查 maxIndex 是否超出数组范围，如果超出则重置
      if (maxIndex >= testimonials.length) {
          maxIndex = 2; // 重置为起始索引
      }

      // 更新 ref.current，并触发组件重新渲染
      currentTestimonialsRef.current = [
        testimonials[maxIndex - 2],
        testimonials[maxIndex - 1],
        testimonials[maxIndex],
      ];
      setCurrentTestimonials(currentTestimonialsRef.current);
    }, 1000);

    return () => clearInterval(interval);
  }, [testimonials]); // 依赖项包括 testimonials，确保在 testimonials 变化时重新设置 interval

  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 元素

  useEffect(() => {
    const interval = setInterval(() => {
      setStartIndex(prevStartIndex => {
        let nextStartIndex = prevStartIndex + 3;
        // 如果下一个起始索引超出了数组的有效范围，则重置为 0
        // 确保总能取到至少一个元素，或者根据需求调整重置逻辑
        if (nextStartIndex >= testimonials.length) {
          nextStartIndex = 0;
        }
        return nextStartIndex;
      });
    }, 1000);

    return () => clearInterval(interval);
  }, [testimonials]); // 依赖项包括 testimonials，确保在 testimonials 变化时重新设置 interval

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