如何使用setInterval在React中重新呈現特定組件還是有另一種方法？

Question

我在React中為時間計數器創建了功能組件。 一切正常。 但是，組件不會在每秒后重新渲染。 我是React的新手。

那么，我們如何使用setInterval()重新渲染功能組件？

import React from 'react'
import withStyle from 'react-jss'


const counterStyle = {
    counter:{
        color:'#FFFFFF'
    }
}

let date = new Date();    
let todayDate = date.getDate();
let hours = date.getHours()
let minutes = date.getMinutes();
let second = date.getUTCSeconds();    

const timerDisplay = () => {
     date = new Date();    
     todayDate = date.getDate();
     hours = date.getHours()
     minutes = date.getMinutes();
     second = date.getUTCSeconds();    
}

const TimeCounter = ({classes}) => {
    setInterval(() => {
        timerDisplay()
    }, 1000);
    return(
        <div className={classes.counter}>
            <h1>{`${hours} : ${minutes} : ${second} : ${todayDate}`}</h1>
        </div>
    )
}

export default withStyle(counterStyle)(TimeCounter);

Answer 1

如果您是ReactJS的新手，您一定要查看useState文檔 。

實際上，您對反應組件的處理方法是錯誤的。 要完成這樣簡單的任務，您可以使用狀態更新，React將自動呈現組件。 不使用像momentjs這樣的庫，vanilla js組件將如下所示：

import React, { useState, useEffect } from 'react'
import withStyle from 'react-jss'

const TimeCounter = ({classes}) => {
    const [time, setTime] = useState(new Date())

    useEffect(() => {
        setInterval(() => {
            setTime(new Date())
        }, 1000);
    }, []);

    return(
        <div className={classes.counter}>
            <h1>{`
                ${time.getHours()} : 
                ${time.getMinutes()} : 
                ${time.getUTCSeconds()} : 
                ${time.getDate()}
            `}</h1>
        </div>
    )
}

export default withStyle(counterStyle)(TimeCounter);

• 我已使用useState()將全局變量更改為state。
• 我已經使用useEffect來處理“ComponentDidMount（）”它會初始化一次間隔。
• 只是因為它的狀態現在React將使用setTime()監聽它的變化並使用該狀態變量重新渲染組件。

Answer 2

您可以使用useState鈎子來存儲date ，

const [timer, setTimer] = useState(new Date());

您必須使用useEffect掛鈎來更新間隔中的狀態，

useEffect(() => {
   const interval = setInterval(() => {
      console.log('This will run every second!');
      setTimer(new Date());
   }, 1000);

   // This is important, you must clear your interval when component unmounts
   return () => clearInterval(interval);

}, [])  // [] is for to execute `useEffect` only once as `componentWillMount`

演示