Question

如何设置单击按钮时在React上显示的错误消息。该按钮是动态创建的，我正在发送状态，我经历了很多答案，但没有任何帮助，如何显示react中的自定义消息

表达

router.post("/registerClass", (req, res) => {
  // const courseID = req.body.courseID
  // const studentID = req.body.studentID
  console.log(req.body.courseID);

  Registration.findOne({
    $and: [
      {
        courseID: req.body.courseID
      },
      {
        studentID: req.body.studentID
      }
    ]
  })
    .exec()
    .then(reg => {
      if (reg) {
        return res.status(400).json({
          err: "Already Registered for this class"
        });
      } else {
        const registration = new Registration({
          _id: new mongoose.Types.ObjectId(),
          courseID: req.body.courseID,
          studentID: req.body.studentID
        });
        registration.save().then(result => {
          res.status(201).json({
            Msg: "Succesfully Register"
          });
        });
      }
    })
    .catch(err => {
      console.log(err);
      res.status(500).json({
        err: err
      });
    });
});

反应

registerClass = e => {
this.setState({
  courseID: e.target.value
});
e.preventDefault();
var data = {
  studentID: this.state.studentID,
  courseID: this.state.courseID
};
axios.post("users/registerClass", data).then(res => {
  if (res.status === 201) {
    console.log(res.status);
  }
  console.log(res.data.errors);
});
// .catch(err => {
//   console.log(err);
// });

};

Answer 1

如果我正确回答了您的问题，那么可能会回答它。

最简单的选择您只需调用窗口警报对话框即可显示错误。

window.alert(res.data.errors);

第二个选项是您可以使用react-toastify npm库或可用的任何类似库在网页上显示错误或任何类型的警报。

第三个选项是创建自己的Snackbar类型的Component，这是一个对话框，每次调用时都会弹出。然后，您可以在每次客户端出现错误时使该组件可见。如果您对此有任何疑问，我可以为您提供代码帮助。

希望如此能够回答您的问题。

从反应中的快速显示处理错误消息

1 个答案: