MERN项目中ReactJS如何检测重复邮箱并通过react toastify展示错误提示

1 先修复后端逻辑问题 #

你现有后端代码存在2个核心错误：

• 后端不能调用alert()方法，这是前端浏览器的专属API，服务端执行会直接报错
• 检测到邮箱已存在后没有终止逻辑，即使重复也会继续插入新用户，而且注释了错误返回的代码，前端拿不到错误提示

先统一保留auth.js里的注册路由，删除另一个重复的/register路由，修改后代码如下：

// auth.js
router.post("/register", async (req, res) => {
  const { identity, names, phone, email, city, address, subject, classes, message } = req.body
  // 可选：先做字段非空校验
  if (!identity || !names || !phone || !email || !city || !address || !subject || !classes || !message) {
    return res.status(422).json({ error: "请填写所有必填字段" })
  }
  try {
    const userExit = await User.findOne({ email: email })
    if (userExit) {
      // 直接返回错误状态码和错误信息，终止后续逻辑
      return res.status(422).json({ error: "邮箱已被注册" })
    }
    const user = new User({identity ,names,  phone,email,city,address, subject, classes, message })
    await user.save()
    res.status(201).json({ message: "用户注册成功" })
  } catch (err) {
    console.log(err)
    res.status(500).json({ error: "服务端错误，请稍后重试" })
  }
})

2 修改前端React代码，适配错误提示 #

你只需要在axios的catch分支里，取出后端返回的错误信息，调用react-toastify的错误提示方法即可，另外要确保你已经在项目中正确配置了react-toastify的容器组件。
修改后register.js的代码如下：

// 首先确保你已经导入了toast和ToastContainer
import { toast, ToastContainer } from 'react-toastify';
import 'react-toastify/dist/ReactToastify.css';

const Register = () => {
  const [newUser, setNewUser] = useState({
    identity: "",
    names: "",
    phone: "",
    email: "",
    city: "",
    address: "",
    subject: "",
    classes: "",
    message: "",
  });

  const handleSubmit = (e) => {
    e.preventDefault();
    axios({
      method: "post",
      url: "/register",
      data: newUser, // axios会自动转json，不用手动stringify
      headers: { "Content-Type": "application/json" },
    }).then((response) => {
        toast.success(`${newUser.names} 🤵 注册成功`, {
          position: "top-center",
          autoClose: 5000,
          hideProgressBar: false,
          closeOnClick: true,
          pauseOnHover: true,
          draggable: true,
          progress: undefined,
        });
        // 注册成功后可清空表单
        setNewUser({
          identity: "",
          names: "",
          phone: "",
          email: "",
          city: "",
          address: "",
          subject: "",
          classes: "",
          message: "",
        })
      })
      .catch((error) => {
        if (error.response) {
          // 取出后端返回的错误信息，用错误样式的toast展示
          toast.error(error.response.data.error, {
            position: "top-center",
            autoClose: 5000,
          })
        } else {
          toast.error("网络错误，请检查网络连接")
        }
      });
  };

  const handleChange = (e) => {
    setNewUser({ ...newUser, [e.target.name]: e.target.value });
  };

  // 组件返回的JSX里要加上ToastContainer，不然toast不会渲染
  return (
    <div>
      <ToastContainer />
      {/* 你的表单代码 */}
    </div>
  )
}

核心注意点 #

• 后端返回4xx/5xx状态码时，axios才会进入catch分支，所以必须给错误请求设置非2开头的状态码
• 检测到重复邮箱后必须加return终止后续代码执行，避免重复插入数据
• 必须在组件的JSX结构中添加<ToastContainer />组件，否则提示不会显示

内容的提问来源于stack exchange，提问作者user14110207