在钩子中使用setInterval无法更新日期和时间

Question

I want to update the date and time for each and every minute. I have used setinterval for that, but i cant able to update the time using 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

You must remember a few things

First: The parameters passed to the useState function are used only once whenthe component mounts

Second: setInterval must not be called directly but within useEffect .

Third: You must take care of closures

Fourth: State update with the same value over and over again will not cause re-renders and hence use the date from the initial closure in setInterval always

Fifth: You must clear the interval when the component is unmounted.

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