React useEffect中使用if语句失效：数组索引循环逻辑出错求助

核心问题有两个： #

• useEffect里的判断语句根本没机会生效：你的useEffect依赖数组是空的[]，这意味着它只会在组件首次挂载时执行一次，此时idx是初始值0，那个if(idx > testimonials.length-1)的条件永远不成立，之后不管idx怎么变，这个useEffect都不会再重新运行，自然不会触发重置逻辑。
• 定时器里的状态更新没做边界校验：你在setIdx的回调里只做了previousValue +1，完全没处理到达数组末尾的情况，导致idx会一直递增，超过数组长度后访问对应元素就会报“读取未定义索引”的错误。

修正后的代码： #

const [idx, setIdx] = useState(0);

useEffect(() => {
  const interval = setInterval(() => {
    setIdx((previousValue) => {
      // 每次更新时判断是否到达数组末尾，是就重置为0，否则加1
      return previousValue >= testimonials.length - 1 ? 0 : previousValue + 1;
    });
  }, 5000);

  return () => clearInterval(interval);
}, [testimonials.length]); // 依赖加上testimonials的长度，防止数组长度变化时逻辑出错

额外说明： #

• 把边界判断放到setIdx的函数式更新里，这样每次更新状态时都能基于最新的previousValue计算，不会有闭包导致的旧值问题。
• 依赖数组加上testimonials.length，如果你的testimonials数组长度可能变化（比如异步加载数据），这样能保证定时器里的判断逻辑用的是最新的数组长度。

内容的提问来源于stack exchange，提问作者Keith Lavoie