Использование перехватчиков реагирования для использования состояния каждую секунду и обновления DOM, только если состояние изменилось - PullRequest
Новая
       9

Использование перехватчиков реагирования для использования состояния каждую секунду и обновления DOM, только если состояние изменилось

0 голосов
/ 30 марта 2020

Приведенный ниже код переопределяет мой JSX каждую секунду (1000), только если я добавлю + Math.random() к .fromNow(). Почему это так? 

 useEffect(()=>{
        if(props.isLive) {
            setTimeout(()=>{
                console.log("setTimeAgo", props.time, props.time.fromNow())
                setTimeAgo(props.time.fromNow());
            }, 1000)
        }
})

Я думал, что функция setTimeout повторяется до бесконечности? так что мой console.log должен отображаться в моей консоли, даже если мой DOM не рендерится?

UPDATE : я понимаю, что мое неверное представление о setTimeout .. что оно просто отстает от вывода на 1 секунду , Попытка выяснить, как заставить timeA go обновляться каждую секунду, а затем повторно отображать DOM, только если timeA go меняет свое предыдущее состояние.

Понимая, что все, что мне нужно сделать, это изменить setTimeout на setInterval .. есть что-то, что я пропускаю помимо этого?

1 Ответ

0 голосов
/ 30 марта 2020

setTimeout запускается один раз после интервала задержки, вам нужно использовать setInterval для выполнения обратного вызова каждые 1000 мс. Также вызовите useEffect на начальном рендере для установки таймера и очистите его при размонтировании 

useEffect(()=>{
    let timer;
    if(props.isLive) {
        timer = setInterval(()=>{
            console.log("setTimeAgo", props.time, props.time.fromNow())
            setTimeAgo(props.time.fromNow());
        }, 1000)
    }, 
    () => {
        if(timer) clearInterval(timer);
    }
}, []); // empty bracket calls the useEffect callback on initial render
...