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){ // 问题点1
        console.log("HERE");
        maxIndex = 2;
      } else {
        console.log("ADD THREE");
        maxIndex += 3;
      }
      setCurrentTestimonials([ // 问题点2
        testimonials[maxIndex - 2],
        testimonials[maxIndex - 1],
        testimonials[maxIndex]
      ]);
      console.log(currentTestimonials[0]); // 问题点2
    }, 1000);

    return () => clearInterval(interval);
  }, []); // 依赖项为空数组，导致闭包问题

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

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

export default function SOCarousel({ testimonials }) {
  // 推荐将 maxIndex 提升为 state，或通过计算得出
  // 这里为了演示 useRef，我们先保持其为局部变量，但需注意其生命周期
  let initialMaxIndex = 2; 

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

  // 使用 useRef 创建一个可变的引用来存储 currentTestimonials 的最新值
  const currentTestimonialsRef = useRef(currentTestimonials);
  // 同样，为了在闭包中访问和更新 maxIndex，我们也需要一个引用
  const maxIndexRef = useRef(initialMaxIndex);


  useEffect(() => {
    // 确保 useRef 存储的是最新的状态值
    currentTestimonialsRef.current = currentTestimonials;

    const interval = setInterval(() => {
      // 使用 .at(-1) 安全地访问数组末尾元素
      // 比较逻辑也需要调整，以判断是否到达父数组的末尾
      if (
        currentTestimonialsRef.current.at(-1) && // 确保元素存在
        testimonials.at(-1) && // 确保父数组元素存在
        currentTestimonialsRef.current.at(-1).localeCompare(testimonials.at(-1)) === 0
      ) {
        console.log('HERE: Reached end of testimonials segment');
        maxIndexRef.current = initialMaxIndex; // 重置索引
      } else {
        console.log('ADD THREE');
        maxIndexRef.current += 3; // 增加索引
      }

      // 更新 currentTestimonialsRef.current
      currentTestimonialsRef.current = [
        testimonials[maxIndexRef.current - 2],
        testimonials[maxIndexRef.current - 1],
        testimonials[maxIndexRef.current],
      ];

      // 通过 setCurrentTestimonials 触发组件重新渲染，显示最新数据
      setCurrentTestimonials(currentTestimonialsRef.current);
    }, 1000);

    return () => clearInterval(interval);
  }, [currentTestimonials, testimonials]); // 依赖 currentTestimonials 和 testimonials 以更新 ref

  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 }) {
  // 使用 state 来管理当前的起始索引，而不是局部变量
  // 这样索引的变化就能触发组件重新渲染
  const [startIndex, setStartIndex] = useState(0); // 从第一个元素开始

  // 计算当前要展示的三个 testimonial
  const currentTestimonials = [
    testimonials[startIndex],
    testimonials[startIndex + 1],
    testimonials[startIndex + 2],
  ].filter(Boolean); // 过滤掉 undefined 值，以防数组长度不足

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

      // 判断是否超出了 testimonials 数组的长度
      // 如果超出了，则重置为 0，实现循环
      if (nextStartIndex >= testimonials.length) {
        console.log('Reached end of testimonials, looping back!');
        nextStartIndex = 0;
      }

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

    return () => clearInterval(interval);
  }, [startIndex, testimonials.length]); // 依赖 startIndex 和 testimonials.length

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