react-intl：缺少语言环境的语言环境数据：“undefined”。使用默认语言环境：“en”作为后备

Question

我正在使用React v15.4，react-intl v2.2.3

在我的/lang/en.json中：

{
  "greeting": "Hello, World!"
}

我的/pages/about.js：

import React from 'react'
import {FormattedMessage} from 'react-intl'
import pageWithIntl from '../components/PageWithIntl'
import Layout from '../components/Layout'

export default pageWithIntl(({intl}) => (
  <Layout>
    <h1 className="page-title">About Page</h1>
    <p>
      <FormattedMessage id='greeting' defaultMessage='Hello, World!' />
    </p>
  </Layout>
))

当我加载页面时，“Hello，World！” - 正确显示文本。 但是在控制台中我得到了

  

[React Intl]缺少区域设置的区域设置数据：“undefined”。运用   默认语言环境：“en”作为后备。

当我重新加载页面时。如何添加缺少的区域设置数据？

Answer 1

您应该将主要组件（通常名为<App/ >）包装到<IntlProvider>中间件中并设置locale道具。

<IntlProvider locale='en'>
   <App/ >
</ IntlProvider>

或React自动设置locale: 'en'并向您发出警告

  

[React Intl]缺少区域设置的区域设置数据：＆＃34; undefined＆＃34;。运用   默认语言环境：＆＃34; en＆＃34;作为后备。