momentjs – fromNow（）方法在通用（同构）的js应用程序中

我有一个应用程序是用node.js和react.js构build的，并且是通用的（或者是之前调用的“同构”），并且使用REST API来获取数据。

在某些组件的render方法中，我以2 days ago或few seconds ago格式显示date，在这种情况下，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> 

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

谢谢！

Answer 1

我和MomentJs有同样的问题。 我select了一个小的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; } }