Javascript 在react组件中的何处应用my moment（）函数？

我正在尝试做一个时钟组件，简单地在网页中以本地格式给出日期和时间。我使用命令行npm I moment导入了MomentJS——保存在我的网页环境中。接下来，我在我的Clock.jsx组件（主要基于网站上的React示例）中编写了这篇文章

从“React”导入React；
从“力矩”中导入力矩；
导出默认类时钟扩展React.Component{
建造师（道具）{
超级（道具）；
此.state={
dateTimestamp:Date.now（）
};
}
勾号=（）=>{
this.setState（{dateTimestamp:this.state.dateTimestamp+1}）；
console.log（'tick'）；
}
componentDidMount（）{
this.interval=setInterval（this.tick，1000）；
}
组件将卸载（）{
clearInterval（这个.interval）；
}
render（）{
const date=this.state.dateTimestamp；
返回(
Heure区域设置：{date}
);
}
}

执行此操作时，时间戳正确递增。但是，当在对象中传递一个新的state元素时，第一个值（基于Date.now（））在构造函数中计算，但是对于每个勾号，只有时间戳在递增，格式化的日期被固定在第一个值上。这是代码

import React from 'react';
import Moment from 'moment';

export default class Clock extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      dateTimestamp : Date.now(),
      dateFormatted : Moment(Date.now()).toString()
    };
  }
  tick = () => {
    this.setState({dateTimestamp: this.state.dateTimestamp + 1});
    console.log(this.state.dateTimestamp);
    this.setState({dateFormatted: Moment(this.state.dateTimestamp).toString()});
    console.log(this.state.dateFormatted);
  }
  ...
  render() {
    const date = this.state.dateFormatted;
    return(
      <div className="clock"> Heure locale : {date}</div>
    );
}

}

从“React”导入React；
从“力矩”中导入力矩；
导出默认类时钟扩展React.Component{
建造师（道具）{
超级（道具）；
此.state={
dateTimestamp:Date.now（），
dateFormatted:Moment（Date.now（））.toString（）
};
}
勾号=（）=>{
this.setState（{dateTimestamp:this.state.dateTimestamp+1}）；
log（this.state.dateTimestamp）；
this.setState（{dateFormatted:Moment（this.state.dateTimestamp.toString（）}）；
log（this.state.dateFormatted）；
}
...
render（）{
const date=this.state.dateFormatted；
返回(
Heure区域设置：{date}
);
}
}

有没有人能解释一下，帮助我解决这个问题，但最重要的是告诉我我的代码出了什么问题

谢谢

更新：最后，我对“时刻”的使用是不恰当的，即使我不能理解为什么它不能以这种方式工作。请在下面找到我的正确实现，以便每秒钟刷新一次日期和时间

import React from 'react';
import Moment from 'moment';

export default class Clock extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      dateFormatted : Moment().locale('fr').format('dddd Do MMMM YYYY HH:mm:ss').toString()
    };
  }
  tick = () => {
    this.setState({
      dateFormatted : Moment().locale('fr').format('dddd Do MMMM YYYY HH:mm:ss').toString()
    });
  }
  componentDidMount() {
    this.interval = setInterval(this.tick, 1000);
  }
  componentWillUnmount() {
    clearInterval(this.interval);
  }
  render() {
    const date = this.state.dateFormatted;
    return(
      <div className="clock"> Date (locale) : {date}</div>
    );
  }
}

从“React”导入React；
从“力矩”中导入力矩；
导出默认类时钟扩展React.Component{
建造师（道具）{
超级（道具）；
此.state={
dateFormatted:矩（）.locale（'fr'）.format（'dddd-Do-MMMM-yyy-HH:mm:ss'）.toString（）
};
}
勾号=（）=>{
这是我的国家({
dateFormatted:矩（）.locale（'fr'）.format（'dddd-Do-MMMM-yyy-HH:mm:ss'）.toString（）
});
}
componentDidMount（）{
this.interval=setInterval（this.tick，1000）；
}
组件将卸载（）{
clearInterval（这个.interval）；
}
render（）{
const date=this.state.dateFormatted；
返回(
日期（区域设置）：{Date}
);
}
}

---

这也“解决”了下面暴露的反模式问题（不同的交叉依赖setState（）调用）。出于任何其他原因，我需要时间戳，但我会找到解决办法。

将您的勾号功能更改为：

tick = () => {
  var timestamp = this.state.dateTimestamp + 1;
  this.setState({
    dateTimestamp: timestamp,
    dateFormatted: Moment(timestamp).toString()
  });
}

这是因为：

setState（）不会立即改变this.state，但会创建 等待状态转换。调用此命令后访问this.state 方法可能返回现有值

---

因此，在下一个setState调用中，使用旧值。我的建议是立即更改这两个值。

@KrzysztofSztompka是正确的，但我要补充的是，维护两个单独的状态变量以数字和格式化字符串表示当前日期是一种反模式。派生状态变量（即，可以使用另一个状态变量计算的状态变量）增加了开发人员始终保持两个状态变量同步的责任。在这个简单的例子中，这似乎不太难，但在更大、更复杂的组件/应用程序中，这可能会变得更难。相反，通常认为更好的做法是维护一个真理来源，并根据需要动态计算任何派生值。下面是我将如何将此模式应用于您的示例

import React from 'react';
import Moment from 'moment';

export default class Clock extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      dateTimestamp : Date.now()
    };
    this.tick = this.tick.bind(this);
  }

  tick() {
    this.setState({
      dateTimestamp: this.state.dateTimestamp + 1
    });
  }

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

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

  render() {
    // Calculate the formatted date on the fly
    const date = Moment(this.state.dateTimestamp).toString();
    return(
      <div className="clock"> Heure locale : {date}</div>
    );
  }

}

从“React”导入React；
从“力矩”中导入力矩；
导出默认类时钟扩展React.Component{
建造师（道具）{
超级（道具）；
此.state={
dateTimestamp:Date.now（）
};
this.tick=this.tick.bind（this）；
}
勾选（）{
这是我的国家({
dateTimestamp:this.state.dateTimestamp+1
});
}
componentDidMount（）{
this.interval=setInterval（this.tick，1000）；
}
组件将卸载（）{
clearInterval（这个.interval）；
}
render（）{
//动态计算格式化日期
const date=Moment（this.state.dateTimestamp.toString（）；
返回(
Heure区域设置：{date}
);
}
}

在

componentWillUpdate（）中更新格式化日期的状态。

import React from 'react';
import Moment from 'moment';

export default class Clock extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      dateTimestamp : Date.now()
    };
    this.tick = this.tick.bind(this);
  }

  tick() {
    this.setState({
      dateTimestamp: this.state.dateTimestamp + 1
    });
  }

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

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

  render() {
    // Calculate the formatted date on the fly
    const date = Moment(this.state.dateTimestamp).toString();
    return(
      <div className="clock"> Heure locale : {date}</div>
    );
  }

}