i18next-http-backend发起多次API调用问题求助

问题原因 #

你在backends数组中配置了两个HttpApi实例，i18next的多层backend机制会按顺序尝试每个配置项，无论目标语言是否一致，都会触发对应的API调用。结合当前代码细节：

• lng和fallbackLng都设为'en'
• 第一个HttpBackend的languageCode是langMap[lang]（此时lang为'en'），第二个是langMap['en']，两者指向同一语言的API资源
  这就导致两次完全相同的API请求被发起。

解决方案 #

方案1：移除重复的HttpBackend实例 #

如果不需要针对同一语言发起多次API请求，删掉backends数组中的第二个HttpApi，同时精简backendOptions，只保留主API配置。利用i18n原生的fallbackLng机制处理降级，当主API请求失败时，自动切换到本地的localResources：

i18n
    .use(HttpApi)
    .use(initReactI18next) 
    .init({
        backend: {
            backends: [
                HttpApi,
                resourcesToBackend(localResources) // 仅API请求失败时启用本地降级
            ],
            backendOptions: [
                {
                    loadPath: HOST,
                    queryStringParams: {file: FILENAME, languageCode: `${langMap[lang]}`},
                    parse: (data) => parseTranslation(data),
                }
            ],
        },
        fallbackLng: 'en',
        lng: 'en', // TODO: 改为动态值
        debug: true,
        keySeparator: false,
        interpolation: {
            escapeValue: false,
        },
    });

方案2：让i18n自动处理多语言降级 #

如果你的降级语言（比如'en'）也需要从API获取，无需手动添加额外的HttpBackend。i18n会自动根据fallbackLng配置，在主语言资源加载失败时，发起降级语言的API请求。例如当lng设为非'en'的语言时，会先请求目标语言资源，失败后自动请求'en'的资源，这属于预期的降级行为。

内容的提问来源于stack exchange，提问作者Lorem Ipsum