React应用中时间戳转时分秒并每秒递增的问题求助

你的代码无法实现时间递增的核心问题有两点：

1. 时间戳状态未更新：定时器仅反复将初始的时间戳数组转换为时分秒格式，没有让每个时间戳每秒加1，导致显示的时间固定不变。
2. 闭包捕获旧值：useEffect依赖初始的timestamp数组，定时器回调始终引用第一次渲染时的旧数组，即便后续更新状态也无法获取最新值。

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.9.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.9.0/umd/react-dom.production.min.js"></script>

const ConvertTimer = () => {
    const [timestamps, setTimestamps] = React.useState([1651234567, 1651234568, 1651234569]);

    // 渲染时直接转换时间格式，无需额外维护timeLeft状态
    const formattedTimes = timestamps.map(ts => {
        const date = new Date(ts * 1000);
        const hours = date.getHours();
        const minutes = date.getMinutes();
        const seconds = date.getSeconds();
        return `${hours}:${minutes}:${seconds}`;
    });

    React.useEffect(() => {
        const timer = setInterval(() => {
            // 函数式更新确保获取最新状态，每个时间戳加1实现递增
            setTimestamps(prev => prev.map(ts => ts + 1));
        }, 1000);

        return () => clearInterval(timer);
    }, []); // 空依赖保证只创建一次定时器

    return (
        <div>
            <h1>Time Left</h1>
            <ul>
                {formattedTimes.map((time, index) => (
                    <li key={index}>{time}</li>
                ))}
            </ul>
        </div>
    )
}

• 移除冗余状态：删掉timeLeft状态，直接在渲染阶段转换时间格式，简化逻辑。
• 正确更新时间戳：用setTimestamps的函数式更新方式，每次让数组中的每个时间戳加1，实现时间递增。
• 优化定时器依赖：useEffect使用空依赖数组，确保组件挂载时只创建一次定时器，避免重复创建。
• 修复key值问题：原代码用动态变化的时间字符串作为key，会导致React频繁重建DOM节点，改用数组索引作为稳定key（若时间戳唯一，也可直接用timestamps[index]）。

内容的提问来源于stack exchange，提问作者abhijit bakshi