react-intl：缺少区域设置的区域设置数据：“未定义”。使用默认语言环境：“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] 缺少区域设置的区域设置数据：“未定义”。使用 默认语言环境：“en”作为后备。

当我重新加载页面时。如何添加缺少的语言环境数据？

Answer 1

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

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

或者 React 自动设置 locale: 'en' 并给你警告

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