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

Question

我开发了一个显示错误的反应应用程序

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

我的 app.js

import{ IntlProvider,addLocaleData } from "react-intl";
import messages from "./messages";
import{locale} from "./reducers/locale";
import {setLocale} from "./actions/locale"; 

class App extends React.Component {
render() {
  const { location, isAuthenticated, loaded, lang } = this.props;
  console.log(lang);//undefined in console
  return (
    <IntlProvider key={ lang } locale={lang} messages={messages}>
     </IntlProvider>

    );
  }

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，在您获得值后，它将渲染元素。

---

是的，很明显，如果您想在第一次加载时不使用语言和消息来渲染元素，您可以使用：

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