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

Question

我开发了一个显示错误的React应用

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

我的app.js

sed

Answer 1

为什么不在父组件上添加console.log来验证您首先传递的数据？如果在此组件上未定义，则很可能是您从父级传递了一个未定义的值。

Answer 2

在安装组件之前，您可能会得到undefined，而具有undefined的呈现元素将引发错误。

仅在未定义的情况下返回元素：

if(lang && messages) {
  return (
    <IntlProvider key={ lang } locale={lang} messages={messages}>
    </IntlProvider>
  )
} else {
  return null
}

速记：

return lang && messages &&
  <IntlProvider key={ lang } locale={lang} messages={messages}> 
  </IntlProvider> || 
  null

现在，这将确保仅当定义了lang（在安装组件之后出现）时才渲染元素，并且不会看到任何错误。这样会在第一次渲染时渲染null，在您获得值之后，它将渲染元素。

---

是的，很明显，如果您想在第一次加载时呈现不包含lang和消息的元素，则可以使用：

return <IntlProvider 
   key={ lang || 'en' } {/* en as default */}
   locale={lang || 'en'} 
   messages={messages || ''}> 
  </IntlProvider>