Next.js 文本循环切换组件状态不更新问题如何解决

• 1. 闭包陷阱导致状态读取异常：useEffect依赖项为空数组，仅会在组件首次挂载时执行一次，内部定义的changeMsg函数会捕获首次渲染时的msg变量（初始值永远为0）。后续每次定时器触发执行changeMsg时，读取到的msg始终是初始的0，所以状态只会从0更新到1，之后再也不会变化，视图自然不会持续更新。
• 2. 下标边界判断逻辑错误：数组的有效下标范围是0 ~ array.length - 1，现有msg > array.length的判断阈值错误，就算闭包问题解决，也会出现下标越界读取到undefined的问题。
• 3. 定时器未清理：组件卸载时没有清除对应的定时器，会导致内存泄漏，以及组件卸载后仍然触发状态更新的运行时报错。

修改后代码如下：

// components/textCycle.js
import { useState, useEffect} from 'react';

function TextCycle ( { array } ) {
  const [ msg, setMsg ] = useState(0);

  useEffect(() => { 
    function changeMsg() {
      // 改用函数式更新获取最新状态，同时修正边界判断逻辑
      setMsg(prev => (prev >= array.length - 1) ? 0 : prev + 1);
    }
    const timer = setInterval(changeMsg, 3000);
    // 注册清理函数，组件卸载时清除定时器
    return () => clearInterval(timer);
    // 把array加入依赖项，外部传入数组变化时自动适配新逻辑
  }, [array]);

  // 新增空数组兼容逻辑，避免运行时报错
  return (
    <div>
     { array?.[msg] ?? '' }
    </div>
  );
};

export default TextCycle;

• 采用setMsg的函数式更新写法，可直接获取上一轮的最新状态值，不受闭包捕获旧变量的影响
• 修正边界判断逻辑，当下标等于数组最后一位时直接归0，避免下标越界
• 新增定时器清理逻辑，避免内存泄漏和卸载后更新状态的报错
• 将array加入useEffect依赖项，当外部传入的数组变化时，会自动重启定时器适配新的数组长度
• 渲染层增加可选链和空值兜底，避免数组为空时出现渲染报错

内容的提问来源于stack exchange，提问作者Keir Finlow-Bates