ReactJS实现数组循环轮播DOM不更新问题排查

你的代码无法触发DOM更新、循环逻辑不生效是几个核心错误导致的：

• 用useRef存储遍历计数：useRef返回的可变对象值变动时不会触发组件重渲染，React完全感知不到ref值的变化，自然不会更新DOM上的内容。
• 自增逻辑错误：count.current = count.current++写法存在语法逻辑问题，后置自增运算符++会先返回变量原始值再执行自增，这行代码执行后count.current会一直停在初始值，根本不会累加。
• 数组索引越界：数组下标从0开始计数，长度为4的数组最大有效索引是3，你写的判断条件count.current <= items.length会让计数走到4，对应取到的数组元素是undefined。
• 定时器使用不规范：useEffect没有传入依赖数组，每次组件重渲染都会新建一个定时器，会出现定时器堆叠、执行混乱、内存泄漏问题；同时没有编写组件卸载时的定时器清理逻辑。
• 渲染取值错误：模板里写的是items[count]，但count是ref包装对象，不是存的数值本身，就算ref变动能触发更新，这种写法也拿不到对应的数组元素。

用useState存储遍历索引（状态变动会自动触发组件重渲染），修正索引累加和边界判断逻辑，给useEffect传空依赖数组保证仅在组件挂载时创建一次定时器，同时添加卸载时的定时器清理逻辑。
修复后的可运行代码：

import { useState, useEffect } from 'react';

const items = ["item-1", "item-2", "item-2", "item-3"];

export default function LoopDisplay() {
  // 用state存索引，值变动自动触发视图更新
  const [count, setCount] = useState(0);

  useEffect(() => {
    const timer = setInterval(() => {
      // 索引到最后一位（length-1）时重置为0，否则正常+1
      setCount(prevIndex => prevIndex >= items.length - 1 ? 0 : prevIndex + 1);
    }, 3000);
    // 组件卸载时清理定时器，避免内存泄漏
    return () => clearInterval(timer);
  }, []);

  return (
    <p>{items[count]}</p>
  )
}

补充：如果你一定要用useRef存计数，每次更新ref值之后需要手动调用强制更新方法触发重渲染，但这种场景下用useState是更符合React设计规范的写法，完全没必要用ref绕路。

内容的提问来源于stack exchange，提问作者Ntwanano Rikhotso