缺少消息：“ app.homepage.title”的区域设置：“ it”，使用默认消息作为后备

Question

我在网页上设置了react-intl，并且我已经验证我的intl道具包含以下内容：

{
    locale: 'it',
    messages: {
        it: {
            app.homepage.title: 'Casa'
        }
    }
}

是的，我收到错误消息：

[React Intl] Missing message: "app.homepage.title" for locale: "it", using default message as fallback.

我不确定自己在做什么错。我通过以下方式使用intl：

const title = intl.formatMessage({
  id: "app.homepage.title",
  defaultMessage: "Home"
});

导入消息

我正在从本地存储的json文件中加载消息，如下所示：

import Italian from "app/translations/it.json";
import locale_en from "react-intl/locale-data/en";
import locale_it from "react-intl/locale-data/it";

addLocaleData([...locale_en, ...locale_it]);

const loadTranslation = () => {
  const urlParams = new URLSearchParams(window.location.search);
  const locale = urlParams.has("locale")
    ? urlParams.get("locale")
    : navigator.language;
  const messages = {
    it: Italian,
    en: null
  };

  return { locale, messages };
};

const { locale, messages } = loadTranslation();

...

<IntlProvider locale={locale} messages={messages}>
    <Provider store={store}>
      <App />
    </Provider>
</IntlProvider>

我的翻译文件包含以下内容：

{
  "app.signup": "Iscriviti",
  "app.login": "Accesso",
  "app.homepage.title": "Casa"
}

Answer 1

好，所以我知道了。我需要像这样修改loadTranslations函数，并且它的工作原理是：

const loadTranslation = () => {
  const urlParams = new URLSearchParams(window.location.search);
  const locale = urlParams.has("locale")
    ? urlParams.get("locale")
    : navigator.language;
  const messages = {
    it: Italian,
    en: null
  };

  return { locale, messages: messages[locale] };
};