дата и время не обновляются с помощью setInterval в хуках - PullRequest
Новая
       2

дата и время не обновляются с помощью setInterval в хуках

0 голосов
/ 06 мая 2019

Я хочу обновить дату и время для каждой минуты.Я использовал 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
  );
}

1 Ответ

2 голосов
/ 06 мая 2019

Вы должны запомнить несколько вещей

Первое: Параметры, переданные в функцию 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"/>
...