React i18Next调用REST API加载翻译不显示问题排查

原本基于i18Next的本地化方案通过本地JSON加载正常，改用i18next-http-backend从外部API获取翻译后，API返回正确JSON，已用React Suspense等待加载，但页面仍显示翻译key，控制台输出i18next::translator: missingKey en translation labels.goToSummary labels.goToSummary错误。

问题根源与修复步骤 #

1. 修复backend的parse函数 #

你的parse函数仅打印日志，未返回解析后的JSON数据，导致i18next无法读取翻译内容。修改如下：

backend: {
    loadPath: `http://rest-api.com/getfile?name=samplefile&lang=en`,
    parse: function (data) {
        const parsedData = JSON.parse(data);
        console.log(parsedData);
        return parsedData; // 必须返回解析后的数据
    },
},

2. 优化loadPath的动态语言支持 #

当前loadPath写死了lang=en，无法适配多语言切换，改用i18next的占位符{{lng}}动态替换语言代码：

loadPath: `http://rest-api.com/getfile?name=samplefile&lang={{lng}}`,

3. 确认命名空间匹配 #

原本地代码使用默认的translation命名空间，你的API返回格式（直接包含翻译键值对）符合要求，修复parse函数后即可与默认命名空间匹配，无需额外调整结构。

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