React Hooks中Axios Post请求成功后API返回消息无法在UI渲染的问题

我一眼就发现了问题根源——你在处理Axios响应时错误地访问了res.message，但实际上API返回的响应数据是存在res.data对象里的！这就是为什么控制台能看到res.data里的消息，但UI上毫无显示：因为res.message是undefined，赋值给message状态后自然渲染不出内容。

具体修复步骤 #

1. 修正响应数据的访问路径 #

在Axios的then回调里，把res.message改成对应API返回的正确路径：

• 如果API直接返回消息字符串（比如"提交成功"），就用setMessage(res.data)；
• 如果API返回包含message字段的对象（比如{ message: "提交成功" }），就用setMessage(res.data.message)。

修改后的submit核心代码片段：

.then(res=>{ 
  console.log(res.data) 
  // 根据你的API实际返回结构调整这里的路径
  setMessage(res.data.message) 
  console.log(res.data.message) // 同步修改控制台打印，确认取值正确
  // 把清空表单的逻辑移到请求成功后，逻辑更合理
  setData({ 
    first_name: "", 
    last_name: "", 
    email:"", 
    phone:"", 
    msz:"" 
  }); 
})

2. 优化表单清空逻辑（可选但推荐） #

你原本在Axios请求外部就调用了setData清空表单，这会导致无论请求成功还是失败，表单都会被清空。把这段代码移到then回调内，确保只有请求成功时才清空表单，这样用户提交失败时还能保留输入内容，体验更友好。

3. 可选：优化消息渲染体验 #

可以给消息加个容器和条件渲染，避免空状态时的冗余渲染：

{message && <div className="response-message">{message}</div>}

用message && ...的写法能确保只有当message有有效内容时才渲染元素。

完整修改后的submit函数 #

function submit(e){ 
  e.preventDefault(); 
  setMessage(null); 
  axios.post(url,{ 
    first_name: data.first_name, 
    last_name:data.last_name, 
    email:data.email, 
    phone:data.phone, 
    msz:data.msz 
  }) 
  .then(res=>{ 
    console.log(res.data) 
    // 替换成你实际API返回的消息字段路径
    setMessage(res.data.message) 
    console.log(res.data.message)
    // 请求成功后再清空表单
    setData({ 
      first_name: "", 
      last_name: "", 
      email:"", 
      phone:"", 
      msz:"" 
    }); 
  }) 
  .catch(err => { 
    setMessage(err.message); 
  }) 
}

这样修改后，API返回的消息就能正确渲染到UI上了！

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