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

Posted 2023-02-22

【中文标题】如何根据 React js 中 api 的响应显示成功或错误消息

【英文标题】：How to show success or error message based on the response of the api in React js

【发布时间】：2021-10-28 09:52:03

【问题描述】：

我已经使用 React js 中的钩子成功执行了 post 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 中。我是新手，我不知道该怎么做。

【问题讨论】：

使用 toast 存储库

向您的后端询问响应消息

【参考方案1】：

您的 API 正在返回一个响应流，您需要使用响应 .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 响应，那么您将来会遇到问题。

【参考方案2】：

我把它清理了一下，所以它更容易理解。简短的回答是使用额外的“useState”挂钩来存储消息。然后有一个逻辑运算符（在第 1 行上方的返回部分）来检查消息是否存在并显示它们。

警告：此代码均未经过测试。

const INITIAL = 
  first_name: "",
  last_name: "",
  email: "",
  phone: "",
  msz: ""


const MessageForm = () => 
  const url = "https://example.herokuapp.com/api/messages"
  const [data, setData] = useState(INITIAL);
  const [message, setMessage] = useState(null);

  function handleSubmit(e) 
    e.preventDefault();

    setMessage(null);

    axios.post(url, data)
      .then(res => 
        setData(res.data);
        setMessage(res.message);
      )
      .catch(err => 
        setMessage(err.message);
      )
  

  function handleChange(e) 
    const  id, value  = e.target; //destructuring 
    setData(...data, [id]:value)
  

  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 className="apply" onSubmit=handleSubmit>

          message && <div>message</div>
          
          <div className="row row-1">
            /* Name here */
            <div className="input-field name">
              <label htmlFor="Name">First Name</label>
              <input onChange=handleChange
                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=handleChange
                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=handleChange
                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=handleChange
                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=handleChange 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;

【讨论】：

你好 Hugais，我按照你说的做了，消息来自控制台但没有在 UI 上呈现

你能分享你的代码吗？我的示例中没有任何“控制台日志”。

代码是一样的，只是我把console.log(message)放在return语句的上面。

@Django-Rocks 我刚刚在codesandbox 上尝试了这段代码，它可以很好地打印消息。

它在控制台上打印但不显示在 UI 中