如果用户在浏览器中使用不支持的语言，如何在React的自定义函数中向特定语言添加后备

问题描述

我正在尝试向我们的Web应用程序添加后备语言功能。目前，如果用户使用的语言与支持的浏览器语言不同，则应用程序将崩溃。我正在努力做到这一点，以便如果用户在浏览器中使用不受支持的语言，则应用程序会将语言更改为英语。

我一开始创建翻译选项时就尝试使用i18next之类的库，但是我没有使其与我们的应用程序配合使用，因此在获得一些外部帮助后，这就是我们处理翻译的方式：

  const currentUser = useSelector(Select.User.current);
  const language = _language || currentUser.language;
  const translations = {
    en,de,fr,};
  const supportedLanguages = Object.keys(translations);
  return [translations[language],supportedLanguages];
}

这是状态控制器

  const noLanguageSet = !currentUser.language;

  useDeepCompareEffect(() => {
    if (!currentUser.current) return;
    if (noLanguageSet) {
      // Select browser language as default
      const browserLang =
        window.navigator.language.split('-')[0] ||
        window.navigator.userLanguage.split('-')[0] ||
        'en';
      actions.editUser({ ...currentUser.ref,language: browserLang });
    }
  },[currentUser.current]);

  return null;

但是，如果用户使用我们的应用程序不支持的浏览器语言，那么我现在对于如何编写上述后备功能已经一无所知。所有帮助将不胜感激！

解决方法

如果知道支持的语言列表，则只需指定一些默认语言，然后在不支持用户语言的情况下使用它即可。

supportedLanguages.includes(browserLanguage) ? browserLanguage : defaultLanguage;