Javascript React JS-实时时钟更新

我有一个时钟函数，它可以获取时间并显示小时、分钟和秒，我试图实时更新屏幕上的数据，但由于某些原因，我的setInterval函数没有达到我的预期

我认为react的渲染方法应该是实时渲染数据。我需要ajax吗？有人能提供一些建议吗

var CityRow = React.createClass({

  render: function() {

    var currentdate = new Date();

    function getTime() {
      // get local time based on the UTC offset
      this.hours = currentdate.getUTCHours() + parseInt(this.props.UTCOffset);    

      // correct for number over 24, and negatives
      if( this.hours >= 24 ){ this.hours = this.hours - 24; }
      if( this.hours < 0   ){ this.hours = this.hours + 12; }

      // add leading zero, first convert hours to string
      this.hours = this.hours + "";
      if( this.hours.length == 1 ){ this.hours = "0" + this.hours; }

      // minutes are the same on every time zone
      this.minutes = currentdate.getUTCMinutes();

      // add leading zero, first convert hours to string
      this.minutes = this.minutes + "";
      if( this.minutes.length == 1 ){ this.minutes = "0" + this.minutes; }

      this.seconds = currentdate.getUTCSeconds();
    }

    window.setInterval(function () {
      getTime();
    }, 1000);

    return(
      <div className="city-row" ref="cityRow">
        <span className="city-time">{this.hours}:{this.minutes}:{this.seconds}</span>
        </div>
      </div>
    )
  }
});

var CityRow=React.createClass({
render:function（）{
var currentdate=新日期（）；
函数getTime（）{
//根据UTC偏移量获取本地时间
this.hours=currentdate.getUTCHours（）+parseInt（this.props.UTCOffset）；
//对于大于24的数字和负片正确
如果（this.hours>=24）{this.hours=this.hours-24；}
如果（this.hours<0）{this.hours=this.hours+12；}
//添加前导零，首先将小时转换为字符串
this.hours=this.hours+“”；
如果（this.hours.length==1）{this.hours=“0”+this.hours；}
//每个时区的分钟数都相同
this.minutes=currentdate.getUTCMinutes（）；
//添加前导零，首先将小时转换为字符串
this.minutes=this.minutes+“”；
如果（this.minutes.length==1）{this.minutes=“0”+this.minutes；}
this.seconds=currentdate.getUTCSeconds（）；
}
window.setInterval（函数（）{
getTime（）；
}, 1000);
返回(
{this.hours}:{this.minutes}:{this.seconds}
)
}
});

您的代码似乎有几个问题。第一个是render函数中的结束div，它导致元素甚至不进行渲染

接下来，您可能希望了解状态/道具，并对一般生命周期方法作出反应，以更好地了解程序流。setInterval应该放在componentDidMount中，这样就不会在每次组件渲染和创建大量计时器时调用它。它还可能有助于将小时、分钟和秒作为状态，以便在这些更改时自动重新渲染组件

我修改了下面的代码，并在JSFIDLE上给出了一个示例。它不能正确地打印秒数（就像在getTime方法中一样），但希望它能让您更好地了解逻辑应该如何流动

var CityRow=React.createClass({
设置时间：函数（）{
var currentdate=新日期（）；
var hours=currentdate.getUTCHours（）+parseInt（this.props.UTCOffset）；
//对于大于24的数字和负片正确
如果（小时>=24）{hours-=24；}
如果（小时<0）{hours+=12；}
//添加前导零，首先将小时转换为字符串
小时数=小时数+“”；
如果（hours.length==1）{hours=“0”+hours；}
//每个时区的分钟数都相同
var minutes=currentdate.getUTCMinutes（）；
//添加前导零，首先将小时转换为字符串
分钟=分钟+“”；
如果（minutes.length==1）{minutes=“0”+minutes；}
秒=currentdate.getUTCSeconds（）；
console.log（小时、分钟、秒）
这是我的国家({
小时：小时，
分钟：分钟，
秒：秒
});
},
componentWillMount:function（）{
这是setTime（）；
},
componentDidMount:function（）{
window.setInterval（函数（）{
这是setTime（）；
}.绑定（本），1000）；
},
render:function（）{
返回(
{this.state.hours}:{this.state.minutes}:{this.state.seconds}
)
}
});

官方的React文档准确描述了您需要什么（甚至解释了为什么您应该按照描述进行操作）：

:

类时钟扩展React.Component{
建造师（道具）{
超级（道具）；
this.state={date:new date（）}；
}
componentDidMount（）{
this.timerID=setInterval(
（）=>这个。勾选（），
1000
);
}
组件将卸载（）{
clearInterval（this.timerID）；
}
勾选（）{
这是我的国家({
日期：新日期（）
});
}
render（）{
返回(
你好，世界！
它是{this.state.date.toLocaleTimeString（）}。
);
}
}
ReactDOM.render(
,
document.getElementById（'root'））
);

更新“检查”答案，以显示格式为“YYYY-MM-DD HH:MM:ss”的UTC日期：

类时钟扩展React.Component{
建造师（道具）{
超级（道具）；
this.state={date:new date（）}；
}
componentDidMount（）{
this.timerID=setInterval(
（）=>这个。勾选（），
1000
);
}
组件将卸载（）{
clearInterval（this.timerID）；
}
勾选（）{
这是我的国家({
日期：新日期（）
});
}
render（）{
const ISOStringDate=this.state.date.toISOString（）；
返回(
UTC时间：
{ISOStringDate.substring（0,19）.replace（'T'，''）}
);
}
}
ReactDOM.render(
,
document.getElementById（'root'））
);

类时钟扩展React.Component{
状态={time:null}
componentDidMount（）{
设置间隔（（）=>{
this.setState（{time:new Date（）.toLocaleTimeString（）}）1000）
}
render（）{
返回(
时间是：{this.state.time}
);
}
}
ReactDOM.render（
,
document.getElementById（'root'）；

从“React”导入React，{Component}；
类时钟扩展组件{
建造师（道具）{
超级（道具）；
此.state={
dateClass:新日期（）
}
this.time=this.state.dateClass.toLocaleTimeString（）；
this.hourMin=this.time.length==10？this.time.slice（0）：this.time.slice（0,5）；
}
设置时间=（）=>{
这是我的国家({
dateClass:新日期（）
})
this.time=this.state.dateClass.toLocaleTimeString（）；
this.hourMin=this.time.length==10？this.time.slice（0）：this.time.slice（0,5）；
}
组件安装（）{
设置间隔（this.setTime，1000）
}
渲染（）{
返回
var CityRow = React.createClass({
  setTime: function(){

    var currentdate = new Date();
    var hours = currentdate.getUTCHours() + parseInt(this.props.UTCOffset);    

      // correct for number over 24, and negatives
      if( hours >= 24 ){ hours -= 24; }
      if( hours < 0   ){ hours += 12; }

      // add leading zero, first convert hours to string
      hours = hours + "";
      if( hours.length == 1 ){ hours = "0" + hours; }

      // minutes are the same on every time zone
      var minutes = currentdate.getUTCMinutes();

      // add leading zero, first convert hours to string
      minutes = minutes + "";
      if( minutes.length == 1 ){ minutes = "0" + minutes; }

      seconds = currentdate.getUTCSeconds();
      console.log(hours, minutes, seconds)
      this.setState({
        hours: hours,
        minutes: minutes,
        seconds: seconds
      });
  },
  componentWillMount: function(){
    this.setTime();
  },
  componentDidMount: function(){
     window.setInterval(function () {
      this.setTime();
    }.bind(this), 1000);
  },
  render: function() {

    return(
      <div className="city-row" ref="cityRow">
        <span className="city-time">{this.state.hours}:{this.state.minutes}:{this.state.seconds}</span>
      </div>
    )
  }
});

class Clock extends React.Component {
  constructor(props) {
    super(props);
    this.state = {date: new Date()};
  }

  componentDidMount() {
    this.timerID = setInterval(
      () => this.tick(),
      1000
    );
  }

  componentWillUnmount() {
    clearInterval(this.timerID);
  }

  tick() {
    this.setState({
      date: new Date()
    });
  }

  render() {
    return (
      <div>
        <h1>Hello, world!</h1>
        <h2>It is {this.state.date.toLocaleTimeString()}.</h2>
      </div>
    );
  }
}

ReactDOM.render(
  <Clock />,
  document.getElementById('root')
);

class Clock extends React.Component {
  constructor(props) {
    super(props);
    this.state = {date: new Date()};
  }

  componentDidMount() {
    this.timerID = setInterval(
      () => this.tick(),
      1000
    );
  }

  componentWillUnmount() {
    clearInterval(this.timerID);
  }

  tick() {
    this.setState({
      date: new Date()
    });
  }

  render() {
    const ISOStringDate = this.state.date.toISOString();
    return (
        <div>
            <h1>UTC Time:</h1>
            <h2>{ISOStringDate.substring(0, 19).replace('T', ' ')}</h2>
        </div>
    );
  }
}

ReactDOM.render(
  <Clock />,
  document.getElementById('root')
);

class Clock extends React.Component {
    
   state ={time:null}
    
    componentDidMount() {
        setInterval(() => {
            this.setState({time:new Date().toLocaleTimeString()})}, 1000)
       }

    render() {
            return (
            <div className="time">
                The time is: {this.state.time}
            </div>
             );
         }
  }

  ReactDOM.render( 
      <Clock />,
      document.getElementById('root') );

import React, { Component } from "react";

class Clock extends Component {
    constructor (props) {
        super(props);

        this.state = {
            dateClass: new Date()
        }

        this.time = this.state.dateClass.toLocaleTimeString();
        this.hourMin = this.time.length === 10? this.time.slice(0) : this.time.slice(0,5);
    }

    setTime = () => {
        this.setState({
            dateClass: new Date()
        })
        this.time = this.state.dateClass.toLocaleTimeString();
        this.hourMin = this.time.length === 10? this.time.slice(0) : this.time.slice(0,5);
    }

    componentDidMount () {
        setInterval(this.setTime, 1000)
    }
    
    render () {
        return (
            <div>
                {this.hourMin}
            </div>
        )
    }
}

export default Clock;