moment.js-通用（同构）js应用程序中的fromNow（）方法

Question

我有一个使用node.js和react.js构建的应用程序，该应用程序是通用的（或以前称为“同构”），并且使用REST API进行获取数据。

在某些组件的render方法中，我以2 days ago或few seconds ago格式显示日期，在这种情况下，moment.js可以完美地工作。 我说的是fromNow()的方法，例如：

render() {
  const { date } = this.props;
  const formattedDate = moment(date).fromNow();

  return (
    <div>{formattedDate}</div>
  );
}

但这是问题所在：

Warning: React attempted to reuse markup in a container but the
checksum was invalid. This generally means that you are using server
rendering and the markup generated on the server was not what the
client was expecting. React injected new markup to compensate which
works but you have lost many of the benefits of server rendering.
Instead, figure out why the markup being generated is different on the
client or server:
(client) 0:0.2.1.0.1.0.3.2">14 minutes ago</div>
(server) 0:0.2.1.0.1.0.3.2">17 minutes ago</div>

我认为服务器时间和客户端时间可能不同，这会导致问题。 在这种情况下最好的解决方案是什么？ 也许值得在API端而不是在应用程序端格式化日期？ 你的想法？

谢谢！

Answer 1

我在MomentJs上也遇到了同样的问题。 我选择了一个小型Javascript助手，并且同构组件一切都很好...

1.组成部分

  _fetch() {
    return this.props.store.dispatch(loadActs()).then(
      results => {
        const inclSeconds = true;
        this.setState({
          ...... 
          lastUpdate: formatAMPM(new Date(), inclSeconds).toString()
        })
      }
    )
  }

2.助手实用程序

module.exports = {
    formatAMPM: (date, inclSecs=false) => {
        let hours = date.getHours();
        let minutes = date.getMinutes();
        let seconds = date.getSeconds();
        let ampm = hours >= 12 ? 'PM' : 'AM';
        let strTime= ''
        hours = hours % 12;
        hours = hours ? hours : 12; // the hour '0' should be '12'
        minutes = minutes < 10 ? '0'+ minutes : minutes;
        seconds = seconds < 10 ? '0'+ seconds : seconds;
        if (inclSecs) {
          strTime = hours + ':' + minutes + ':' + seconds + ' ' + ampm;
        } else {
          strTime = hours + ':' + minutes + ' ' + ampm;
        }
        return strTime;
      }
}