我正在尝试做一个时钟组件，只是为了在网页中以本地格式提供日期和时间。我在我的 webpack 环境中使用命令行 npm i moment --save 导入了 MomentJS。接下来，我将其写入我的 Clock.jsx 组件(主要基于网站上的 React 示例)。

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

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

}

这样做时间戳正确递增。然而，当在对象中传递一个新的状态元素时，第一个值(基于 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>
    );
}

}

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

谢谢

更新:最后我对 moment 的使用是不合适的，即使我不明白为什么它不能这样工作。在下面找到我的正确实现，以每秒刷新一次日期和时间。

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>
    );
  }
}

这也“解决”了下面暴露的反模式问题(不同的交叉依赖 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>
    );
  }

}

关于javascript - 在 React 组件中哪里应用我的 moment() 函数？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34621442/