Javascript 无法更新ReactJs中的特定类

我试图在使用React.js构建的页面中动态更新日期时间值。因此，作为参考，我从以下文章开始：

但是日期时间值没有更新。 这是我的密码：

var WelcomeMsg = React.createClass({ 
  render : function()
  {
    return (
      <div>
        <h2>Hello , User...</h2>
      </div>
    )
  }
});

var ShowTime = React.createClass({ 
  render : function()
  {
    return (
    <div>
      <h2>It is {new Date().toLocaleTimeString()}.</h2>
    </div>
      )

  }
});


var Form=React.createClass({
 render:function(){ return(
  <div>
    <WelcomeMsg/>
     <ShowTime/>
  </div>
  )}
});

ReactDOM.render(<Form/>,document.body);
setInterval(ShowTime, 1000);

var WelcomeMsg=React.createClass（{
render:function（）
{
返回(
你好，用户。。。
)
}
});
var ShowTime=React.createClass（{
render:function（）
{
返回(
它是{new Date（）.toLocaleTimeString（）}。
)
}
});
var Form=React.createClass({
render:function（）{return(
)}
});
render（，document.body）；
设置间隔（显示时间，1000）；

---

我需要将ShowTime作为一个单独的类。

正如@Shubham Jain所提到的，从这里删除setInterval：

ReactDOM.render(<Form/>,document.body);
setInterval(ShowTime, 1000);

并使用setInterval将该状态更新为：

setInterval(() => {
  this.setState({ time: new Date().toLocaleTimeString() })
}, 1000)

---

然后可以在渲染中使用

{this.state.time}

代替

{new Date（）.toLocaleTimeString（）}

。

如@Shubham Jain所述，从此处删除setInterval：

ReactDOM.render(<Form/>,document.body);
setInterval(ShowTime, 1000);

并使用setInterval将该状态更新为：

setInterval(() => {
  this.setState({ time: new Date().toLocaleTimeString() })
}, 1000)

---

然后可以在render中使用

{this.state.time}

代替

{new Date（）.toLocaleTimeString（）}

。

我的代码在ES6中实现

class HelloWidget extends React.Component{
    constructor(props) {
      super(props);
      this.state = {
            time: new Date().toLocaleString()
      };
    }

    componentDidMount(){
        setInterval(() => {
          this.setState({ time : new Date().toLocaleString() })
        },1000)
    }

    render() {
        return (
            <div>{this.state.time}</div>
        )
    }
  }

类HelloWidget扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
时间：新日期（）.toLocaleString（）
};
}
componentDidMount（）{
设置间隔（（）=>{
this.setState（{time:new Date（）.toLocaleString（）}）
},1000)
}
render（）{
返回(
{this.state.time}
)
}
}

我的代码在ES6中实现

class HelloWidget extends React.Component{
    constructor(props) {
      super(props);
      this.state = {
            time: new Date().toLocaleString()
      };
    }

    componentDidMount(){
        setInterval(() => {
          this.setState({ time : new Date().toLocaleString() })
        },1000)
    }

    render() {
        return (
            <div>{this.state.time}</div>
        )
    }
  }

类HelloWidget扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
时间：新日期（）.toLocaleString（）
};
}
componentDidMount（）{
设置间隔（（）=>{
this.setState（{time:new Date（）.toLocaleString（）}）
},1000)
}
render（）{
返回(
{this.state.time}
)
}
}

您需要设置处于该状态的时间，然后每1000毫秒更新一次该状态，然后当您更新该状态时，组件本身将重新加载。您调用setInterval的方式无助于您更新时间。您能共享预期和实际输出吗？@AanchalSharma:预期输出：实际输出：时间没有动态更新。@ShubhamJain:您能用少量代码或参考来解释一下吗？您需要在状态中设置时间，然后在每次更新后更新该状态1000毫秒，然后当您更新状态时，组件本身将重新启动。您调用setInterval的方式无助于您更新时间。您能共享预期和实际输出吗？@AanchalSharma:预期输出：实际输出：时间没有动态更新。@ShubhamJain:您能用少量代码或参考来解释一下吗？