在哪里将我的moment()函数应用于react组件? [英] Where to apply my moment() function in a react component?

问题描述

我试图做一个时钟组件，只是在网页中以本地格式给出日期和时间.我使用我的webpack环境中的npm命令行导入了MomentJS.接下来，我在Clock.jsx组件中编写了此代码(主要基于网站上的React示例).

I am trying to do a clock component, simply to give the date and time in local format in a webpage. I imported MomentJS using the command line npm i moment --save in my webpack environment. Next I wrote this in my Clock.jsx component (mostly based on the React example on the website).

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())是在构造函数中计算的，但是对于每个刻度，只有时间戳递增，格式化日期才会停留在其第一个值上.这是代码.

Doing this the timestamp incremented correctly. However, when passing a new state element in the object, the first value (based on Date.now() ) is calculated in the constructor but for each tick, only the timestamp is incrementing the formatted date is stuck on its first value. Here is the code.

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

}

有人可以解释帮助我解决此问题，但是首先请告诉我我的代码出了什么问题?

Does anyone could explain help me solving this issue but above all tell me what is going wrong with my piece of code?

谢谢

更新:最后，即使无法弄清为什么我不能使用这种方式，但我对时刻的使用还是不合适的.在我的正确实现下方找到可以让日期和时间每秒钟刷新一次的

UPDATE: In the end my use of moment was not appropriate, even if I cannot figure out why it would not work this way. Find below my correct implementation to have the date and time refreshed every seconds.

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()调用).出于任何其他原因，我都需要时间戳记，但是我会找到一种解决方法.

This also "solves" the anti pattern issue exposed below (different cross-dependant setState() call). I would need the timestamp for any other reason but I will find a workaround.

推荐答案

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

@KrzysztofSztompka is correct, but I would add that maintaining two separate state variables to represent the current date as a number and as a formatted string is an antipattern. Derived state variables (i.e., state variables that can be calculated using another state variable) increases the responsibility on the developer to always keep the two state variables in sync. That may not seem too difficult in this simple example, but it can become more difficult in larger, more complicated components/apps. Instead, it is generally considered better practice to maintain one source of truth and calculate any derived values on the fly as you need them. Here's how I would apply this pattern to your example.

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

}

这篇关于在哪里将我的moment()函数应用于react组件?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！