我想根據發送 axios 請求時收到的 HTTP 回應狀態代碼顯示成功或錯誤訊息，使用 react-toastify（例如，如果狀態代碼為 406，則 react-toastify 應顯示錯誤訊息，如“某些欄位為空”或者如果狀態代碼為“422”，則應在前端顯示一條錯誤訊息，如“電子郵件已注冊”，如果狀態代碼為“200”，react-toastify 應顯示一條訊息“帳戶創建成功”）。
這是我的后端 api 代碼
router.route('/register').post(upload.single('photo'), (req, res) => {
const name = req.body.name;
const email = req.body.email;
const phone = req.body.phone;
const work = req.body.work;
const password = req.body.password;
const cpassword = req.body.cpassword;
const photo = req.file.filename;
if(!name || !email || !phone || !work || !password || !cpassword || !photo ){
return res.status(406).json({message:"Some fields are missing"}) ;
}
User.findOne({email: email})
.then((userExist)=>{
if (userExist){
return res.status(422).json({Error:"Email already registered"});
}
const newUserData = {
name,
email,
phone,
work,
password,
cpassword,
photo
}
const newUser = new User(newUserData);
newUser.save().then(()=>{
res.status(201).json({message:"user created successfuly"});
alert("user created succcessfully")
}).catch((err)=>res.status(500).json({error:"registeration failed"})
);
}).catch((err)=>{console.log(err);});
});
這是從輸入欄位獲取資料的前面的函式
const handleSubmit = (e) => {
e.preventDefault();
let url = 'http://localhost:3000/register'
const formData = new FormData();
formData.append('name', newUser.name);
formData.append('email', newUser.email);
formData.append('phone', newUser.phone);
formData.append('work', newUser.work);
formData.append('password', newUser.password);
formData.append('cpassword', newUser.cpassword);
formData.append('photo', newUser.photo);
axios.post(url , formData)
.then(res => {
console.log(res)
history.push('/login')
} )
.catch(err => {
console.log(err);
});
}
uj5u.com熱心網友回復：
假設您已經有 react-toastify 設定，只需檢查回應狀態并觸發 toast 如果它等于您想要的值，在您的情況下為 200。像這樣：
axios.post(url , formData)
.then(res => {
if (res.status === 200)
toast.success("Success!");
history.push('/login')
} )
.catch(err => {
console.log(err);
});
編輯：如果它是您正在呼叫的newUser函式，則 POST 請求成功時的狀態將為 201，而不是您在問題中提到的 200。如果是這種情況，只需將 200 替換為 201。
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/375747.html