4

我一直在用 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" />
    )
}

在代码中，我们看到组件使用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)，但都产生范围错误。

4

1 回答 1

2

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

要获取您提供的代码段，而不是：

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

它返回类似：

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

formatjs 不接受超过 60 秒的分钟（如预期的那样）。

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

于 2016-01-15T01:41:49.173 回答