在響應中使用時刻和時刻創建運行時鐘

Question

我正在嘗試創建一個呈現滴答時鐘的反應組件。我在不同的時區使用時刻和時刻。我能夠創建一個靜態時鐘組件（不增加），但我無法創建滴答時鐘。代碼如下：

import React from 'react'; 
import ReactDOM from 'react-dom'; 
import $ from 'jquery'; 
import moment from 'moment'; 
import 'moment-timezone'; 

export default class TimeClock extends React.Component { 

    constructor(props) { 
     super(props); 
     this.state = { time: moment().clone().tz(this.props.timezone).toLocaleString() }; 
     this.displayTime = this.displayTime.bind(this); 
    } 

    displayTime(){ 
     //let now = moment(); 
     //let location = now.clone().tz(this.props.timezone); 
     this.setState({ 
      time: moment().clone().tz(this.props.timezone).toLocaleString() 
     }); 
     //return location.toLocaleString(); 
    } 
    render(){ 
     //let now = moment(); 
     //let location = now.clone().tz(this.props.timezone); 
     //let timezone = this.props.timezone; 
     return (
      <div> 
       <p>{this.props.timezone}</p> 
       <p>{setInterval(this.displayTime,1000)}</p> 
      </div> 
     ); 
    } 
} 

注意：它從父組件app.js傳遞一個prop（時區）。

當前代碼輸出以下：

Australia/Melbourne 

####### 

其中#######代表了一些數字，開始在5或6和迅速增加。

有人可以解釋我做錯了什麼嗎？

編輯：在發佈這個問題後不久，我發現了以下鏈接（Where to apply my moment() function in a react component?），它適應了我的代碼並使其工作，但我不明白爲什麼我的嘗試不起作用。我是新來的反應。

Answer 1

您的代碼不會呈現與當前時間相關的任何內容。這條線：

<p>{setInterval(this.displayTime,1000)}</p> 

不打印當前時間 - 它顯示創建間隔的ID，因爲這是由setInterval()函數返回。

因此，首先，您應該更改此行以顯示基於組件狀態的時間。這可以這樣做：

<p>{this.state.time}</p> 

另一件你需要做的是正確地創建間隔。在render()方法設置它是不是一個好主意，因爲你將創建一個新的區間

componentDidMount() { 
    // Arrow function allows you to use "this" in context of the Component 
    this.interval = setInterval(() => { 
     this.displayTime(); 
    }), 1000); 
} 

（你應該還記得曾經組件是從視圖中刪除停用的時間間隔）。