React中i18n缺失翻译无法写入文件的问题排查

问题场景 #

我在React应用中按如下方式配置i18n：

import i18n from "i18next";
import { initReactI18next } from "react-i18next";
import HttpApi from 'i18next-http-backend';

i18n
  .use(HttpApi)  // load translation using http -> see /public/locales
  .use(initReactI18next)
  .init({
    lng: "en",
    debug: true,
    fallbackLng: "en",
    saveMissing: true,
    backend: { addPath: 'http://localhost:3000/public/locales/{{lng}}/{{ns}}.missing.json'},
    interpolation: {
      escapeValue: false // react already safes from xss
    }
  });

当添加未翻译文本（如{t("find_box")}）时，浏览器控制台显示已向addPath发送POST请求，响应体为{"find_box": "find_box"}且返回200状态码，但addPath对应的文件仍为空对象{ }，未写入缺失翻译条目。

问题解答 #

1. 对saveMissing功能的理解是否正确？ #

你对saveMissing的核心逻辑理解是对的：开启该配置后，i18next检测到未定义的翻译key时，会自动向backend.addPath指定的地址发送POST请求，提交缺失的key和默认值（这里默认值就是key本身）。但要注意——i18next-http-backend只负责发送请求，不负责接收并写入文件，写入操作需要后端服务来完成。

2. 是否需要自定义missingKeyHandler来将POST请求内容写入文件？ #

不需要自定义missingKeyHandler，但你必须实现一个后端接口来处理这个POST请求，把请求体里的内容写入到指定的.missing.json文件中。

你当前把addPath指向了静态文件路径，前端发送的POST请求被React开发服务器这类静态文件服务器接收后，服务器只会返回200状态码，不会自动将请求体内容写入文件。你需要自己写一个简单的后端服务（比如用Node.js + Express），监听这个POST路径，读取请求体数据，然后将内容追加或覆盖写入对应的JSON文件。

3. 使用docker-compose本地运行React应用是否会造成影响？ #

会有影响，但这不是导致文件未写入的核心原因，主要是路径映射的问题：

• 如果React应用运行在Docker容器内，容器内的/public/locales目录和本地主机的目录是相互隔离的，除非你在docker-compose配置中做了目录挂载，否则即使后端服务（若也在容器内）写入了容器内的文件，你在本地主机上也看不到文件更新；
• 另外，React内置的开发服务器本身不具备处理POST请求并写入文件的能力，就算不用Docker，这个问题依然存在。

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