4

React でデモを作成していて、react-intl に出会いました。API 呼び出しから返され、「this.state」に格納される「値」で FormattedDate コンポーネントを使用しようとしました

ただし、ページの読み込みに失敗し、コンソールに次のように表示されます: 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 に答える