React useEffect 中实现循环轮播组件的常见陷阱与优化实践

import { useEffect, useState } from 'react';

export default function Carosel({ testimonials }) {
  let maxIndex = 2; // 初始索引

  const [currentTestimonials, setCurrentTestimonials] = useState([
    testimonials[maxIndex - 2],
    testimonials[maxIndex - 1],
    testimonials[maxIndex],
  ]);

  useEffect(() => {
    const interval = setInterval(() => {
      // 问题一：不正确的数组索引访问
      // if (currentTestimonials[-1].localeCompare(currentTestimonials[-1]) == 0){
      //   console.log("HERE");
      //   maxIndex = 2;
      // } else {
      //   console.log("ADD THREE");
      //   maxIndex += 3;
      // }

      // 问题二：maxIndex 逻辑未考虑数组越界，且 currentTestimonials 存在闭包问题
      maxIndex += 3; // 每次增加3
      setCurrentTestimonials([
        testimonials[maxIndex - 2],
        testimonials[maxIndex - 1],
        testimonials[maxIndex]
      ]);
      console.log(currentTestimonials[0]); // 这里会打印旧的 currentTestimonials 值
    }, 1000);

    return () => clearInterval(interval); // 清除定时器
  }, []); // 依赖数组为空，useEffect 只运行一次

  console.log(currentTestimonials);

  return (
    <div className="carosel-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 }) {
  // 确保 testimonials 数组至少有3个元素，否则需要额外处理
  if (!testimonials || testimonials.length < 3) {
    return <div className="carousel-container flex">暂无数据</div>;
  }

  // maxIndex 作为局部变量，在 useEffect 的闭包中被捕获和更新
  let maxIndex = 2; 

  const [currentTestimonials, setCurrentTestimonials] = useState([
    testimonials[maxIndex - 2],
    testimonials[maxIndex - 1],
    testimonials[maxIndex],
  ]);

  useEffect(() => {
    const interval = setInterval(() => {
      console.log('ADD THREE');
      maxIndex += 3; // 每次递增3

      // 检查是否超出数组边界，如果超出则重置为初始索引
      // 这里的逻辑是确保 maxIndex 始终指向当前批次的最后一个元素的索引
      // 如果 maxIndex 超过了数组的实际长度，说明需要从头开始
      if (maxIndex >= testimonials.length) {
        console.log('reached end of testimonials, looping!');
        maxIndex = 2; // 重置为第一个批次的最后一个元素的索引
      }

      // 根据新的 maxIndex 更新状态
      setCurrentTestimonials([
        testimonials[maxIndex - 2],
        testimonials[maxIndex - 1],
        testimonials[maxIndex],
      ]);
    }, 1000);

    // 清理函数：组件卸载时清除定时器，防止内存泄漏
    return () => clearInterval(interval);
  }, [testimonials]); // 将 testimonials 加入依赖数组，以防外部数据源变化

  console.log('Current Testimonials State:', currentTestimonials);

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