如何实现DeepL翻译应用前端选语言名后端传语言代码？

核心思路 #

前端展示语言名称供用户选择，内部同时维护对应的语言代码，翻译时向后端传递代码而非名称。需同步修改后端接口返回格式与前端状态管理逻辑。

步骤1：修改后端server.js的/languages接口 #

原接口将语言名称与代码拼接为字符串返回，现改为返回包含name和code的完整对象数组，让前端能同时获取名称与代码：

app.get("/languages", async(req, res) => {
  const authKey = process.env.DEEPL_API_KEY;
  const translator = new deepl.Translator(authKey);
  const sourceLanguages = await translator.getSourceLanguages();

  try {
    // 返回保留name和code字段的对象数组
    res.status(200).json(sourceLanguages.map(lang => ({
      name: lang.name,
      code: lang.code
    })));
  } catch(err) {
    console.log(err);
    res.status(500).json({message: err});
  }
});

步骤2：修改前端App.js的状态与逻辑 #

2.1 更新语言状态存储结构 #

将inputLanguage和outputLanguage从字符串改为对象，同时存储名称与代码：

const [inputLanguage, setInputLanguage] = useState({name: "English", code: "EN"});
const [outputLanguage, setOutputLanguage] = useState({name: "Japanese", code: "JA"});

2.2 调整翻译请求参数 #

调用后端翻译接口时，传递语言代码而非名称：

const translate = async () => {
  const data = {
    textToTranslate, 
    outputLanguage: outputLanguage.code, 
    inputLanguage: inputLanguage.code
  }
  const response = await axios("http://localhost:8000/translation", {
    params: data,
  });
  setTranslatedText(response.data);
}

2.3 更新语言交换逻辑 #

交换输入输出语言时，直接交换整个对象：

const handleClick = () => {
  setInputLanguage(outputLanguage);
  setOutputLanguage(inputLanguage);
}

2.4 调整Modal组件的props传递 #

确保Modal接收完整的语言对象数组，并正确处理选择逻辑：

{showModal && <Modal 
  setShowModal={setShowModal}
  languages={languages}
  chosenLanguage={showModal === "input" ? inputLanguage : outputLanguage}
  setChosenLanguage={showModal === "input" ? setInputLanguage : setOutputLanguage}
/>}

步骤3：修改Modal组件的渲染与选择逻辑 #

在Modal中渲染语言名称供用户选择，选中时将完整语言对象返回给父组件：

// Modal核心代码示例
const Modal = ({ setShowModal, languages, chosenLanguage, setChosenLanguage }) => {
  const handleSelectChange = (e) => {
    const selectedLang = JSON.parse(e.target.value);
    setChosenLanguage(selectedLang);
  };

  return (
    <div className="modal">
      <select 
        value={JSON.stringify(chosenLanguage)} 
        onChange={handleSelectChange}
      >
        {languages?.map(lang => (
          <option key={lang.code} value={JSON.stringify(lang)}>
            {lang.name}
          </option>
        ))}
      </select>
      <button onClick={() => setShowModal(null)}>确认</button>
    </div>
  );
};

export default Modal;

步骤4：更新TextBox组件的显示 #

TextBox中展示选中的语言名称：

// TextBox组件内使用selectedLanguage.name
<div className="language-selector">
  {selectedLanguage.name}
</div>

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