如何解决提交成功或失败后,如何以反应形式显示烤面包机警报?
我想知道如何在单击显示“您的信息已发送”的“发送信息”按钮时显示烤面包机警报,并且如果失败则显示“无法发送您的信息,这是问题!” >
我要发送的代码是:
const sendMail = async (data: FormData) => {
const response = await fetch('https://us-central1-my-website.cloudfunctions.net/apply-function',{
method: 'POST',body: data,});
};
解决方法
一旦解析或拒绝,response
对象将具有一个名为status
的属性,该属性指示请求是由服务器(API)解析还是拒绝。您可以使用status
属性来相应显示警报。
示例
import React from 'react';
const Mail = () => {
const [alert,setAlert] = React.useState({ show: false,message: '' });
const sendMail = async (data: FormData) => {
// It's better to use try catch block when writing an async function.
try {
const response = await fetch(
'https://us-central1-my-website.cloudfunctions.net/apply-function',{
method: 'POST',body: data,}
);
if (response.status === 200) {
setAlert({
show: true,message: 'Your information has been sent!',});
}
} catch {
// If response was not successful.
setAlert({
show: true,message: 'Your information could not be sent!',});
}
};
return (
<>
{/* Other components.. */}
<Toaster show={alert.show} message={alert.message} />
</>
);
};
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。