javascript - 使用钩子(Hook)中的 setInterval 未更新日期和时间

Question

我想更新每一分钟的日期和时间。我已经使用 setinterval 来实现这一点，但我无法使用 React hooks 更新时间。

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"/>