1

我想显示成功或错误消息，具体取决于我在发送 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);
                
             });
    }
4

1 回答 1

1

假设您已经有 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。

于 2021-12-07T18:30:59.110 回答