使用 axios 方法时如何使用 react-toastify 传递成功或错误消息

Question

我想根据发送 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);
                
             });
    }

Answer 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 替换为 201。

使用 axios 方法时如何使用 react-toastify 传递成功或错误消息

how can I pass success or error message using react-toastify when using axios method

reactjs

react-toastify