React useEffect中循环数组、解决闭包陷阱与状态管理实践

if (currentTestimonials[-1].localeCompare(currentTestimonials[-1]) == 0)

// 获取数组的最后一个元素
const lastItem = currentTestimonials.at(-1);

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

export default function SOCarousel({ testimonials }) {
  // maxIndex 可以在这里作为局部变量，或者为了更清晰地管理，使用 useState
  // 这里我们沿用原答案的 let 方式，但会在注意事项中说明 useState 的优势
  let maxIndex = 2; 

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

  // 使用 useRef 存储 currentTestimonials 的最新值
  const currentTestimonialsRef = useRef(currentTestimonials);

  useEffect(() => {
    // 确保 ref 始终指向最新的 state
    currentTestimonialsRef.current = currentTestimonials;
  }, [currentTestimonials]); // 当 currentTestimonials 变化时更新 ref

  useEffect(() => {
    const interval = setInterval(() => {
      // 在 interval 回调中，通过 ref 访问最新的状态
      if (
        currentTestimonialsRef.current
          .at(-1) // 使用 .at(-1) 安全访问最后一个元素
          .localeCompare(testimonials.at(-1)) === 0 // 比较是否到达父数组的最后一个元素
      ) {
        console.log('HERE: Reached end of testimonials, resetting index.');
        maxIndex = 2; // 重置索引
      } else {
        console.log('ADD THREE: Moving to next set of testimonials.');
        maxIndex += 3; // 增加索引
      }

      // 更新 ref 中的值
      currentTestimonialsRef.current = [
        testimonials[maxIndex - 2],
        testimonials[maxIndex - 1],
        testimonials[maxIndex],
      ];

      // 调用 setCurrentTestimonials 触发组件重新渲染
      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 [maxIndex, setMaxIndex] = useState(2); 

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

  useEffect(() => {
    const interval = setInterval(() => {
      console.log('ADD THREE: Moving to next set of testimonials.');

      // 计算下一个 maxIndex
      let nextMaxIndex = maxIndex + 3;

      // 判断是否超出父数组长度，如果超出则重置
      if (nextMaxIndex > testimonials.length) {
        console.log('reached end of testimonials! Resetting index.');
        nextMaxIndex = 2; // 重置为初始索引
      }

      // 更新 maxIndex 状态
      setMaxIndex(nextMaxIndex);

      // 根据新的 nextMaxIndex 更新 currentTestimonials
      setCurrentTestimonials([
        testimonials[nextMaxIndex - 2],
        testimonials[nextMaxIndex - 1],
        testimonials[nextMaxIndex],
      ]);
    }, 1000);

    // 清理函数
    return () => clearInterval(interval);
  }, [maxIndex, testimonials]); // 依赖 maxIndex 和 testimonials，确保获取最新值

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