React中使用axios发起POST请求时如何编码方程字符串

我来帮你搞定这个编码的问题～先看看你之前两种方法为啥行不通：

你的错误原因分析 #

• 第一种方法：{ encodeURIComponent(equation) } 这是对象字面量的语法错误，JavaScript不知道这个编码后的值对应的键名是什么，必须明确指定键值对才行。
• 第二种方法：const { test } = encodeURIComponent(equation); 这里你试图解构一个字符串（encodeURIComponent返回的是字符串），但字符串根本没有test这个属性，所以解构出来的test会是undefined，自然无效。

正确的实现方式 #

你只需要先把equation编码成变量，再把这个变量作为键值对的一部分传给Axios即可，步骤如下：

1. 先对equation进行编码，得到一个新变量
2. 在Axios的请求体里，用键值对的形式传递这个编码后的变量（键名要和API期望接收的字段名一致）

完整的修正后代码 #

handleSubmit = (e) => {
  e.preventDefault();
  const { equation } = this.state;
  
  // 正确编码：直接赋值给变量，不用解构
  const encodedEquation = encodeURIComponent(equation);
  
  // 把编码后的变量传给API，注意键名要和API预期的字段匹配
  axios.post(`${this.state.rootUrl}/integrate`, { equation: encodedEquation })
    .then((response) => {
      const data = response.data;
      this.setState({ data: data });
      console.log(encodedEquation); // 可以打印编码后的结果确认
      if (data != null) {
        this.setState({ input: data.response[0] });
      }
    })
    // 建议加上catch处理错误哦
    .catch((error) => {
      console.error('请求出错:', error);
    });
}

如果你的API期望接收的字段名是test而不是equation，只需要把请求体改成{ test: encodedEquation }就可以了。

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