使用 'date-fns' 库时如何在 React 中自动刷新时间

Question

我正在使用 React 处理我的个人作品集，我想在登陆页面上添加一条声明，向招聘人员显示我的本地时间和时区，如下所示：

我已经使用 date-fns 库实现了这一点，但我目前面临一个问题。随着时间的流逝，屏幕上的时间值保持不变，不会自动更新。就在我们说话的时候，现在是 16:58，但时间仍然显示 16:47。我必须手动刷新才能显示更新的时间值。我想以这样的方式实现这一点，即时间每 60 秒更新一次并始终显示当前时间。

我写了这个 Class 组件来实现功能：

export class Time extends Component {

  constructor() {
  super();
    var today = new Date();

    var time = format(today, 'HH:mm')

    this.state = {

      currentTime: time

    }

  }

   
  render() {
    return (
      <div className="time">
        <p>
          My Local Time is { this.state.currentTime } GMT +3
        </p>
      </div>
    );
  }

}

setInterval(Time, 60000);

我该怎么做才能使这成为可能？

Answer 1

创建一个 componentDidMount 方法，并将 setInterval 放在那里。确保 setInterval 更新 this.state.currentTime。之后清除间隔也是一个好主意，所以存储间隔id然后在componentWillUnmount.

中调用clearInterval

像这样

export class Time extends Component {
    intervalId

    constructor() {
        super()
        var today = new Date()

        var time = format(today, "HH:mm")

        this.state = {
            currentTime: time,
        }
    }

    componentDidMount() {
        var today = new Date()

        var time = format(today, "HH:mm")

        intervalId = setInterval(() =>
            this.setState({
                currentTime: time,
            }),
            60000
        )
    }

    componentWillUnmount() {
        clearInterval(intervalId) // Clear interval to prevent memory leaks
    }

    render() {
        return (
            <div className="time">
                <p>My Local Time is {this.state.currentTime} GMT +3</p>
            </div>
        )
    }
}

我建议您阅读 React Docs，因为这些是 React 的基础知识。

Answer 2

我尝试使用，但我运行遇到了 intervalId 变量声明的问题。因此，我求助于使用 React Hooks 并将此组件转换为功能组件。

下面的代码有效：

export const Time = () => {
   

  const [time, setTime] = useState(new Date());

  useEffect(
    () => {
      const intervalId = setInterval(() => {
      
        setTime(new Date());
      }, 60000);
      return () => {
        clearInterval(intervalId)
      }
    } 
  )

  return(
    <div>
      <p>{`My local time is ${format(time, 'HH:mm')} GMT+3`} </p>
    </div>
  )

}

使用 'date-fns' 库时如何在 React 中自动刷新时间

How to auto-refresh time in React when using 'date-fns' library

javascript

reactjs

date-fns