ReactJS中POST请求重复调用返回旧数据问题排查

问题描述 #

复刻Google翻译功能时，使用translo.p.rapidapi.com的API，首次请求能正常返回预期翻译结果，但修改输入文本后，尽管发送了新文本，始终返回首次请求的旧数据。

示例：首次输入波斯尼亚语文本，正确翻译为英文Greetings from Bosnia；修改输入文本后本该得到Greetings from Croatia，却仍返回旧结果。

问题原因 #

核心问题是复用了同一个全局的URLSearchParams对象，每次调用append()方法会往对象中累加参数：

• 多次点击语言选择按钮，会添加多个from/to参数
• 多次调用翻译函数，会添加多个text参数

API处理请求时会取参数列表中的第一个值，因此始终返回首次请求的结果。

修复方案 #

每次发起翻译请求时，确保使用的参数是最新的，避免参数累加。以下是两种可行的修复方式：

方式一：每次请求新建URLSearchParams对象 #

将参数的创建逻辑移到翻译函数内部，每次请求都生成全新的参数对象：

// 用变量存储选中的语言，而非直接append到全局参数
let selectedFrom = '';
let selectedTo = '';

const inputClick = (key) => {
  console.log("input key is: ", key)
  selectedFrom = key;
};

const outputClick = (key) => {
  console.log("output key is: ", key)
  selectedTo = key;
};

// 基础请求配置，不绑定固定的body
const baseOptions = {
  method: "POST",
  headers: {
    "content-type": "application/x-www-form-urlencoded",
    "X-RapidAPI-Key": "...",
    "X-RapidAPI-Host": "translo.p.rapidapi.com",
  },
};

const translate = () => {
  const inp = document.getElementById("input-txt").value;
  // 每次请求新建参数对象
  const encodedParams = new URLSearchParams();
  encodedParams.append("from", selectedFrom);
  encodedParams.append("to", selectedTo);
  encodedParams.append("text", inp);
  
  console.log("input text: ", inp)

  fetch("https://translo.p.rapidapi.com/api/v3/translate", {
    ...baseOptions,
    body: encodedParams
  })
  .then(response => response.json())
  .then(response => {
    console.log(response)
    console.log("translated text: ", response.translated_text)
  })
  .catch(err => console.error(err))
}

方式二：清空旧参数后添加新参数 #

如果需要复用全局的URLSearchParams对象，每次请求前先清空已有参数，再添加最新值：

const encodedParams = new URLSearchParams();
let selectedFrom = '';
let selectedTo = '';

const inputClick = (key) => {
  console.log("input key is: ", key)
  selectedFrom = key;
};

const outputClick = (key) => {
  console.log("output key is: ", key)
  selectedTo = key;
};

const options = {
  method: "POST",
  headers: {
    "content-type": "application/x-www-form-urlencoded",
    "X-RapidAPI-Key": "...",
    "X-RapidAPI-Host": "translo.p.rapidapi.com",
  },
  body: encodedParams,
};

const translate = () => {
  const inp = document.getElementById("input-txt").value;
  
  // 清空所有旧参数
  encodedParams.delete('from');
  encodedParams.delete('to');
  encodedParams.delete('text');
  
  // 添加最新参数
  encodedParams.append("from", selectedFrom);
  encodedParams.append("to", selectedTo);
  encodedParams.append("text", inp);
  
  console.log("input text: ", inp)

  fetch("https://translo.p.rapidapi.com/api/v3/translate", options)
  .then(response => response.json())
  .then(response => {
    console.log(response)
    console.log("translated text: ", response.translated_text)
  })
  .catch(err => console.error(err))
}

关键说明 #

• 原代码中inputClick和outputClick直接调用append()会导致多语言参数累加，改为用变量存储选中值，确保每次请求只传递一个from和to参数
• 方式一的隔离性更好，避免全局状态带来的潜在问题，推荐使用

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