React状态用作数组索引未按预期循环切换，请求排查修复

问题根源 #

1. goReverese变量状态丢失：它是普通变量，组件每次重新渲染都会被重置为false。当posNo到2时，临时把goReverese设为true，但组件更新后这个值立刻变回false，无法维持反向状态。
2. 重复创建定时器：useEffect没有设置依赖数组，每次posNo更新都会生成新的定时器，多个定时器同时操作状态导致混乱。
3. 逻辑判断连续执行：两个独立的if语句会依次触发。当posNo等于2时，第一个if把goReverese设为true，第二个if随即执行将posNo减1，但后续因goReverese被重置，又开始递增，最终卡在1→2→1的循环里。

修复后的代码 #

import React, { useEffect, useState } from "react";
import "./02-LandStyle.scss";

export default function IntroLine() {
    const positions = ["0vh", "-6vh", "-12vh"];
    const [posNo, setPosNo] = useState(0);
    // 用useState保存方向状态，避免渲染时重置
    const [goReverse, setGoReverse] = useState(false);

    useEffect(() => {
        const updatePos = setInterval(() => {
            setPosNo(prev => {
                // 根据当前位置和方向判断下一步值
                if (!goReverse) {
                    if (prev === 2) {
                        setGoReverse(true);
                        return prev - 1;
                    }
                    return prev + 1;
                } else {
                    if (prev === 0) {
                        setGoReverse(false);
                        return prev + 1;
                    }
                    return prev - 1;
                }
            });
        }, 2000);

        return () => clearInterval(updatePos);
    }, [goReverse]); // 依赖goReverse，确保方向变化时定时器逻辑同步

    return (
        <div className="intro-text">
            <h2>Delivers </h2>
            <div className="inner-container">
                <div
                    className="inner-box"
                    style={{ top: `${positions[posNo]}` }}
                >
                    <div className="slogan-item">
                        <h2>FOOD</h2>
                    </div>
                    <div className="slogan-item">
                        <h2>LOVE</h2>
                    </div>
                    <div className="slogan-item">
                        <h2>HAPPINESS</h2>
                    </div>
                </div>
            </div>
        </div>
    );
}

关键修改说明 #

• 将goReverese改为useState状态变量，保证组件渲染时方向状态不会丢失。
• 给useEffect添加[goReverse]依赖数组，只在方向变化时更新定时器逻辑，同时避免重复创建定时器。
• 使用setPosNo的函数式更新，直接获取最新的prev状态值，避免闭包导致的旧值问题。
• 合并逻辑判断，在更新posNo的同时处理方向切换，确保状态变化的连贯性。

内容的提问来源于stack exchange，提问作者Hari Prasad