javascript - 如何根据 React js 中 api 的响应显示成功或错误消息

Question

我已经在 React js 中使用钩子(Hook)成功执行了 Axios 后调用。但我不确定如何显示从 api 响应捕获的成功消息或错误消息并将其显示在表单下方。消息应该与 API 响应中所写的完全一致。

我的留言表:

const MessageForm = () => {
  const url = "https://example.herokuapp.com/api/messages"
  const [data, setData] = useState({
    first_name: "",
    last_name: "",
    email:"",
    phone:"",
    msz:""

  })
  function submit(e){
    e.preventDefault();
    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)
    })
    setData({
        first_name: "",
        last_name: "",
        email:"",
        phone:"",
        msz:""
    
      });
  }

  function handle(e){
      const newdata = {...data}
      newdata[e.target.id] = e.target.value
      setData(newdata)
      console.log(newdata)
      
      // setData("");
  }

  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 */}
      </div>
    </div>
  );
};

export default MessageForm;

这是我从 api 得到的响应

在这里，我想捕获消息中写入的字符串并将其呈现在 UI 中。我是新手，我不知道该怎么做。

Answer 1

您的 API 正在返回一个响应流，您需要使用 response .json() 方法来读取它直到完成。但在此之前，您应该存储响应状态代码，因为在解析响应 JSON 后它变得不可访问。

axios.post(url,{
    first_name: data.first_name,
    last_name:data.last_name,
    email:data.email,
    phone:data.phone,
    msz:data.msz
}).then(response => {

    let statusCode = response.status,
        success = response.ok;

    response.json().then(response => {

        if(!success){
            //handle errors here
            console.log(response.message)
            return;
        }

        // handle successful requests here
        console.log(response.message)

    })
}).catch((error) => {
    // catch any unexpected errors
    console.log(error);
})

一些一般性建议。您应该尝试将 Axios 请求分离到一个独立的函数中并使其可重用，否则如果您决定将来以不同方式处理 API 响应，您将在未来遇到问题。