i18nProvider 为默认语言环境的消息返回了一个 Promise。反应管理员

Question

您的预期：
使用 localStorage.getItem('locale_language'); 中的值设置初始语言环境，而不是 'en'.

import polyglotI18nProvider from 'ra-i18n-polyglot'; // react-admin 

const i18nProvider = polyglotI18nProvider(locale => {
    if (locale === 'ru') {
        return import('./i18n/ru').then(messages => messages.default);
    }
    return englishMessages;
}, 'en');

发生了什么：

但是当我这样做时出现错误Error: The i18nProvider returned a Promise for the messages of the default locale (ru). Please update your i18nProvider to return the messages of the default locale in a synchronous way.

相关代码：

这是我如何从 localStore 获取价值

export function getLocalLanguage(): string {
    let defaultLocalLanguage = 'en';
    const storedLanguage = localStorage.getItem('locale_language');
    if (storedLanguage !== null) {
        defaultLocalLanguage = storedLanguage;
    }
    return defaultLocalLanguage;
}

我如何为 polyglotI18nProvider

设置初始本地

const i18nProvider = polyglotI18nProvider(locale => {
    if (locale === 'ru') {
        return import('./i18n/ru').then(messages => messages.default);
    }
    return englishMessages;
}, getLocalLanguage());

Here is said localStorage is syncronous那么应该没有问题吧？

resolveBrowserLocale 可能是另一种选择，但我需要一种更持久的方式来存储语言。

Answer 1

从 localStorage 中提取时，您似乎将默认语言环境设置为 'ru'，但 'ru' 字符串的 import 是异步的。

来自 documentation for ra-i18n-polyglot:

The messages for the default locale (used by react-admin for the initial render) must be returned in a synchronous way.

他们给出的 example 建议如果你想动态解析 default (= initial) 语言环境，你需要同步导入所有可能的语言：

import englishMessages from 'ra-language-english';
import frenchMessages from 'ra-language-french';

const messages = {
    fr: frenchMessages,
    en: englishMessages,
};

const i18nProvider = polyglotI18nProvider(
    locale => messages[locale] ? messages[locale] : messages.en,
    resolveBrowserLocale()
);

编辑：更多代码

i18nProvider 为默认语言环境的消息返回了一个 Promise。反应管理员

The i18nProvider returned a Promise for the messages of the default locale. react-admin

javascript

react-admin