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>
))

当我加载页面时，“你好，世界！” - 文本正确显示。但在控制台中我得到

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

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

Answer 1

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

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

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

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