javascript - React Intl v2 无法将 <FormattedDate> 与来自 SQL 的日期一起使用

Question

我一直在用 React 构建一个演示，并遇到了 react-intl。我尝试将 FormattedDate 组件与从 API 调用返回并存储在“this.state”中的“值”一起使用

但是页面无法加载并且控制台显示: RangeError: Provided date is not in valid range，代码如下。

index.js

ReactDOM.render(
    <IntlProvider locale='en'>
      <Router>
        <Route path="/" component={App}>
          <IndexRoute component={Login} />
          <Route path="bookings" component={Bookings} />
          <Route path="bookings/:id" component={BookingDetail} />
          <Route path="create" component={BookingCreate} />
        </Route>
      </Router>
    </IntlProvider>,
    document.getElementById('react-container')
);

在我的组件渲染中，

render() {
    return (
      <FormattedDate value={new Date(this.state.booking.checkIn)}  day="numeric" month="long" year="numeric" />
    )
}

在code我们看到该组件使用 Intl.DateTimeFormat.prototype.format生成格式化日期，但是当我在 Node repl

中执行相同操作时

var date = '2015-10-30T23:53:28.879Z'
console.log(new Intl.DateTimeFormat().format(new Date(date)));

10/30/2015 //It produces the correct output

知道为什么会这样吗？我试过也尝试将裸字符串分配为“值”，以及 (new Date(date.parse(this.state.booking.checkIn)，但都产生范围错误.

Answer 1

我遇到过类似的问题。查看我的日志，我注意到一些库(在我的例子中是 momentjs)返回一个完整的日期，分钟分为 100 秒。

获取您提供的代码片段，而不是:

 '2015-10-30T23:53:28.879Z'

它返回如下内容:

 '2015-10-30T23:53:86.879Z'

formatjs 不接受分成超过 60 秒的分钟(如预期的那样)。

根据我的需要，我不关心秒数，所以我通过在将它传递给 formatjs 之前从字符串中删除秒数来解决这个问题。