textarea为空时axios GET请求报400，已做空值判断仍报错如何解决？

• 空值校验逻辑顺序错误：你将空值判断放在了Axios请求执行之后，无论textarea输入是否为空，都会先调用翻译接口。当输入为空时，请求的text参数为空，不符合Yandex翻译接口的参数要求，因此返回400状态码。
• 缺少异步请求异常捕获：async/await语法未配套错误捕获逻辑，接口请求失败后没有对应的处理逻辑，直接抛出未捕获的Promise异常。

1. 调整逻辑执行顺序，优先做空值校验，只有输入内容非空时才发起翻译请求
2. 增加try/catch块包裹异步请求，处理接口调用失败的场景
3. 建议使用Axios的params配置传递参数，自动完成URL编码，避免特殊字符引发的请求异常

修改后的事件回调代码如下：

onFirstChange = async (e) => {
  const inputVal = e.target.value
  // 优先做空值判断
  if (inputVal === "") {
    this.setState({
      firstArea: "",
      lastArea: "",
    });
    return // 空值直接返回，不发起请求
  }
  
  try {
    const response = await axios.get("https://translate.yandex.net/api/v1.5/tr.json/translate", {
      params: {
        key: key,
        text: inputVal,
        lang: "en"
      }
    });
    this.setState({
      firstArea: inputVal,
      lastArea: response.data.text,
    });
  } catch (err) {
    // 可在这里添加请求失败的自定义处理逻辑，比如提示用户翻译失败
    console.error('翻译请求失败：', err)
  }
};

如果你的textarea需要和state完全绑定，建议将defaultValue改为value，使其成为完全受控组件，避免状态不同步的问题。

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