使用挂钩中的 setInterval 未更新日期和时间

Question

我想更新每一分钟的日期和时间。我为此使用了 setinterval，但我无法使用反应钩子更新时间。

const Link = (props) => {
let date = new Date();
const [dateTime, setDateTime] = useState({ curTime: date.toLocaleDateString(),
    timeStr: date.toLocaleTimeString().replace(/:\d{2}\s/, " "),
    curDay: date.toLocaleDateString("en-US", { weekday: "short" })  
});    
setInterval(() => {
    setDateTime({
        curTime: date.toLocaleDateString(),
        timeStr: date.toLocaleTimeString().replace(/:\d{2}\s/, " "),
        curDay: date.toLocaleDateString("en-US", { weekday: "short" })
      });
      console.log(dateTime);
    },
    60000
  );
}

Answer 1

你必须记住一些事情

首先：传递给useState函数的参数只在组件挂载时使用一次

其次： setInterval不能直接调用，必须在useEffect.

内调用

第三：你必须注意闭包

第四： 状态一次又一次地更新相同的值不会导致重新渲染，因此始终使用 setInterval 中初始关闭的日期

第五：卸载组件时一定要清除间隔

    const Link = (props) => {
    
        let date = new Date();
        const [dateTime, setDateTime] = React.useState({ curTime: date.toLocaleDateString(),
            timeStr: date.toLocaleTimeString().replace(/:\d{2}\s/, " "),
            curDay: date.toLocaleDateString("en-US", { weekday: "short" })  
        });  
    
        React.useEffect(() => {  
        
            const interval = setInterval(() => {
                const date = new Date();
                setDateTime({
                    curTime: date.toLocaleDateString(),
                    timeStr: date.toLocaleTimeString().replace(/:\d{2}\s/, " "),
                    curDay: date.toLocaleDateString("en-US", { weekday: "short" })
                });
                console.log(dateTime);
                },
                60000
              );
            return () => { clearInterval(interval)}
        }, [])
        const {curTime, timeStr, curDay} = dateTime;
        return (
           <div>
            <div>CurTime: {curTime}</div>
            <div>TimeStr: {timeStr}</div>
            <div>CurDay: {curDay}</div>
           </div>
        )
    }
    
ReactDOM.render(<Link />, document.getElementById('app'));

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

使用挂钩中的 setInterval 未更新日期和时间

date and time are not getting updated using setInterval in hooks

html

javascript

reactjs

react-hooks