如何将Axios返回的表单验证错误存入React表单状态？

假设你的后端返回的err.response.data.errors结构和Yup客户端验证生成的错误对象格式一致（即键为表单字段名，值为对应错误提示文本），可以直接在catch块中这样写：

try {
  const res = await axios.post('/api/submit-form', yourFormData);
  // 处理请求成功的逻辑，比如重置表单、跳转页面等
} catch (err) {
  // 优先处理后端返回的字段级验证错误
  if (err.response?.data?.errors) {
    setErrors(err.response.data.errors);
  } else {
    // 处理其他错误（比如网络中断、服务器500错误）
    setErrors({
      general: err.message || '请求失败，请稍后重试'
    });
  }
}

关键注意事项： #

• 必须保证后端返回的errors结构和Yup输出的错误结构完全匹配，比如Yup生成的错误是{ email: '邮箱格式不正确', password: '密码长度不能少于6位' }，后端也要返回相同格式的对象，这样前端的错误展示逻辑可以直接复用
• 使用?.可选链操作符，防止在无响应数据时出现Cannot read properties of undefined的报错
• 额外添加通用错误处理，避免用户遇到非验证类错误时页面无反馈

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