React应用实时时间不更新问题及修复咨询

你的代码中，currTime 是在 App.js 加载时一次性计算的常量，不会随时间自动更新。Signin 组件导入的是这个初始值，所以定时器每秒打印的始终是首次渲染时的时间。

我们需要用 React 状态来管理实时时间，并通过定时器每秒更新状态，触发组件重新渲染。下面提供两种实现方式：

方式一：在 Signin 组件内直接管理时间状态 #

这种方式适合仅 Signin 组件需要实时时间的场景：

修改后的 Signin.js #

import React, { useState, useEffect } from 'react';

function Signin() {
    // 初始化时间状态
    const [currTime, setCurrTime] = useState(() => {
        const date = new Date();
        const options = { hour: '2-digit', minute: '2-digit', second: '2-digit', hour12: true };
        return new Intl.DateTimeFormat('en-US', options).format(date).slice(0, 8);
    });

    useEffect(() => {
        // 每秒更新时间状态
        const interval = setInterval(() => {
            const date = new Date();
            const options = { hour: '2-digit', minute: '2-digit', second: '2-digit', hour12: true };
            const newTime = new Intl.DateTimeFormat('en-US', options).format(date).slice(0, 8);
            setCurrTime(newTime);
            console.log(newTime);
        }, 1000);

        // 组件卸载时清除定时器
        return () => clearInterval(interval);
    }, []);

    return (
        <>
            Sign In<br />
            当前时间：{currTime}
        </>
    );
}

export default Signin;

修改后的 App.js #

import React from 'react';
import { BrowserRouter, Route, Routes } from 'react-router-dom';
import Signin from './pages/Signin';

export default function App() {
    return (
        <div className='App'>
            <BrowserRouter>
                <Routes>
                    <Route path="/" element={<Signin />} />
                </Routes>
            </BrowserRouter>
        </div>
    );
}

方式二：在 App 组件管理时间状态并传递给 Signin #

如果其他组件也需要实时时间，推荐这种方式：

修改后的 App.js #

Too Usuario>可供退热药 production证明蹭业务enn宏slom,:// Wait no, correct code:
import React, { useState, useEffect } from 'react';
import { BrowserRouter, Route, Routes } from 'react-router-dom';
import Signin from './pages/Signin';

export default function App() {
    const [currTime, setCurrTime] = useState(() => {
        const date = new Date();
        const options = { hour: '2-digit', minute: '2-digit', second: '2-digit', hour12: true };
        return new Intl.DateTimeFormat('en-US', options).format(date).slice(0, 8);
    });

    useEffect(() => {
        const interval = setInterval(() => {
            const date = new Date();
            const options = { hour: '2-digit', minute: '2-digit', second: '2-digit', hour12: true };
            const newTime = new Intl.DateTimeFormat('en-US', options).format(date).slice(0, 8);
            setCurrTime(newTime);
        }, 1000);

        return () => clearInterval(interval);
    }, []);

    return (
        <div className='App'>
            <BrowserRouter>
                <Routes>
                    <Route path="/" element={<Signin currTime={currTime} />} />
                </Routes>
            </BrowserRouter>
        </div>
    );
}

修改后的 Signin.js #

import React, { useEffect } from 'react';

function Signin({ currTime }) {
    // 当时间更新时打印
    useEffect(() => {
        console.log(currTime);
    }, [currTime]);

    return (
        <>
            Sign In<br />
            当前时间：{currTime}
        </>
    );
}

export default Signin;

• React 状态: 用 useState 存储时间，确保时间变化时组件能重新渲染。
• 定时器: 通过 setInterval 每秒生成新的时间并更新状态，实现实时刷新。
• 清除定时器: 在 useEffect 的返回函数中清除定时器，避免内存泄漏。

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