ReactJS中Toast提示data未定义，错误消息无法正常显示问题

问题描述 #

React前端调用注册接口时，捕获错误并通过Toast展示后端自定义错误消息时，出现err.response.data未定义的报错；若删除.data.message仅保留err，Toast能正常弹出但无法获取后端返回的自定义提示内容。

相关代码 #

前端ReactJS代码 #

http
  .post("/user/createAccount", data)
  .then((res) => {
    console.log(res.data);
    navigate("/user/login");
  })
  .catch(function (err) {
    toast.error(`${err.response.data.message}`);
  });

后端Node.js代码 #

let user = await UserAccount.findOne({
  where: { emailAccount: data.emailAccount },
  where: { phoneNo: data.phoneNo },
});
if (user) {
  res.status(400).json({ message: "Email or Phone Number already exists." });
  return;
}

问题分析 #

1. 后端查询逻辑错误：findOne中写了两个where配置，后一个会覆盖前一个，导致实际只会查询手机号是否存在，邮箱的校验失效。当邮箱重复时，后端不会返回预期的400错误，前端自然拿不到response.data.message。
2. 前端错误处理不严谨：当请求出现网络错误、后端未返回响应等情况时，err.response会不存在，直接访问err.response.data.message会触发data未定义的报错。

解决方案 #

1. 修复后端查询逻辑 #

使用Sequelize的Op.or实现邮箱或手机号的OR查询，确保任一条件重复都能返回错误提示：

// 先引入Op
const { Op } = require('sequelize');

// 修正查询语句
let user = await UserAccount.findOne({
  where: {
    [Op.or]: [
      { emailAccount: data.emailAccount },
      { phoneNo: data.phoneNo }
    ]
  }
});
if (user) {
  res.status(400).json({ message: "Email or Phone Number already exists." });
  return;
}

2. 完善前端错误处理 #

添加可选链操作符（?.）做兜底，避免因response或data不存在导致报错：

http
  .post("/user/createAccount", data)
  .then((res) => {
    console.log(res.data);
    navigate("/user/login");
  })
  .catch(function (err) {
    // 优先取后端自定义消息，否则用默认提示
    const errorMsg = err?.response?.data?.message || "注册失败，请稍后重试";
    toast.error(errorMsg);
  });

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