0

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

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

    );
  }
4

2 回答 2

1

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

于 2018-08-31T10:55:40.990 回答
1

在你的组件被挂载之前，你可能会得到 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>
于 2018-08-31T11:10:37.773 回答