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

【问题标题】：How to auto-refresh time in React when using 'date-fns' library使用'date-fns'库时如何在React中自动刷新时间
【发布时间】：2021-11-26 17:23:33
【问题描述】：

我正在使用 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);

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

【问题讨论】：

标签： javascript reactjs date-fns

【解决方案1】：

我尝试使用 solution provided Luke-shang-04，但在声明 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>
  )

}

【讨论】：

【解决方案2】：

创建一个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 的基础知识。

【讨论】：