React.js中如何根据API响应在表单下方展示成功与错误提示消息

步骤1：新增状态存储响应消息 #

在组件的state部分新增两个变量，分别用来存储接口返回的消息内容、以及消息的成功/失败状态：

// 原有data状态不变
const [responseMsg, setResponseMsg] = useState('');
// 用来区分消息类型，true为成功，false为失败
const [isSuccess, setIsSuccess] = useState(null);

步骤2：修正提交逻辑，捕获接口的成功/错误响应 #

原有代码里重置表单的逻辑放在了axios异步请求的外面，会导致请求还没发送完成就清空了表单内容，同时缺少错误场景的捕获，修改后的submit函数如下：

function submit(e){
  e.preventDefault();
  // 提交前清空之前的提示消息
  setResponseMsg('');
  setIsSuccess(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=>{
    // 从接口响应里拿到message字段
    setResponseMsg(res.data.message);
    setIsSuccess(true);
    // 请求成功后再重置表单
    setData({
      first_name: "",
      last_name: "",
      email:"",
      phone:"",
      msz:""
    });
  })
  .catch(err=>{
    // 捕获错误场景的提示，优先取接口返回的错误message，没有就用默认提示
    const errMsg = err.response?.data?.message || '请求发送失败，请稍后重试';
    setResponseMsg(errMsg);
    setIsSuccess(false);
  })
}

步骤3：在表单下方添加消息展示区域 #

在</form>标签结束的位置下方，新增消息渲染的代码：

{/* Form end */}
{responseMsg && (
  <div 
    className={`response-msg ${isSuccess ? 'success' : 'error'}`}
    style={{
      marginTop: '20px',
      padding: '10px 15px',
      borderRadius: '4px',
      color: isSuccess ? '#2e7d32' : '#d32f2f',
      backgroundColor: isSuccess ? '#edf7ed' : '#ffebee'
    }}
  >
    {responseMsg}
  </div>
)}

你也可以自己写css类控制样式，上面的内联样式可以直接用做测试。

完整修改后的代码 #

import { useState } from 'react';
import axios from 'axios';
// 确保你已经正确引入ExploreButton组件
import ExploreButton from './你的ExploreButton路径';

const MessageForm = () => {
  const url = "https://example.herokuapp.com/api/messages"
  const [data, setData] = useState({
    first_name: "",
    last_name: "",
    email:"",
    phone:"",
    msz:""
  })
  const [responseMsg, setResponseMsg] = useState('');
  const [isSuccess, setIsSuccess] = useState(null);

  function submit(e){
    e.preventDefault();
    setResponseMsg('');
    setIsSuccess(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=>{
      setResponseMsg(res.data.message);
      setIsSuccess(true);
      setData({
        first_name: "",
        last_name: "",
        email:"",
        phone:"",
        msz:""
      });
    })
    .catch(err=>{
      const errMsg = err.response?.data?.message || '请求发送失败，请稍后重试';
      setResponseMsg(errMsg);
      setIsSuccess(false);
    })
  }

  function handle(e){
      const newdata = {...data}
      newdata[e.target.id] = e.target.value
      setData(newdata)
  }

  return (
    <div className="message-form">
      <div className="container">
        <div className="title">
          <span>Contact Now</span>
          <div className="main-title">Send us a message</div>
        </div>
        {/* form start */}
        <form action="" className="apply" onSubmit={(e)=> submit(e)}>
          <div className="row row-1">
            {/* Name here */}
            <div className="input-field name">
              <label htmlFor="Name">First Name</label>
              <input onChange ={(e) => handle(e)} value = {data.first_name}
                required 
                type="text"
                placeholder="Your First Name"
                name="Name"
                id="first_name"
              />
            </div>
            <div className="input-field name">
              <label htmlFor="Name">Last Name</label>
              <input onChange ={(e) => handle(e)} value = {data.last_name}
                required
                type="text"
                placeholder="Your Last Name"
                name="Name"
                id="last_name"
              />
            </div>
          </div>

          <div className="row row-2">
            {/* phone here */}
            <div className="input-field phone">
              <label htmlFor="Phone">Phone</label>
              <input onChange ={(e) => handle(e)} value = {data.phone}
                required
                type="text"
                placeholder="Your Phone Here"
                name="Phone"
                id="phone"
              />
            </div>

            {/* Email here */}
            <div className="input-field email">
              <label htmlFor="Email">Email Address</label>
              <input onChange ={(e) => handle(e)} value = {data.email}
                required 
                type="text"
                placeholder="Your Email Address"
                name="Email"
                id="email"
              />
            </div>
          </div>

          {/* date select */}
          <div className="row row-3">
            {/* Message here */}
            <div className="input-field message">
              <label htmlFor="Message">Message</label>
              <textarea onChange ={(e) => handle(e)} value = {data.msz}
                required
                placeholder="Enter Message Here"
                name="Message"
                id="msz"
              />
            </div>
          </div>

          {/* submit button */}
          <ExploreButton hoverText="Submit" hover="hoverTrue">
            Send Now
          </ExploreButton>
        </form>
        {/* Form end */}
        {responseMsg && (
          <div 
            className={`response-msg ${isSuccess ? 'success' : 'error'}`}
            style={{
              marginTop: '20px',
              padding: '10px 15px',
              borderRadius: '4px',
              color: isSuccess ? '#2e7d32' : '#d32f2f',
              backgroundColor: isSuccess ? '#edf7ed' : '#ffebee'
            }}
          >
            {responseMsg}
          </div>
        )}
      </div>
    </div>
  );
};

export default MessageForm;

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