Отсутствуют данные локали для локали: "undefined". Использование языка по умолчанию: "en" в качестве резервного

Question

Я разрабатываю приложение реакции, которое показывает ошибку

[React Intl] Отсутствуют данные локали для локали: "undefined". Использование языка по умолчанию: "en" в качестве запасного варианта.

my 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

Перед монтированием компонента вы можете получить неопределенное значение, а элемент рендеринга с неопределенным вызовет ошибку.

Возвращать элемент, только если не неопределено:

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>

Answer 2

Почему бы вам не добавить console.log в родительский компонент для проверки данных, через которые вы сначала проходите? Если он не определен в этом компоненте, скорее всего, вы передаете ему неопределенное значение из родительского элемента.