React注册页面错误信息无法显示问题排查求助

核心问题排查 #

1. 异步Action错误捕获失效：createAsyncThunk返回的action被dispatch后，不会自动抛出rejected状态的错误，必须调用unwrap()才能在try/catch中捕获服务端返回的错误
2. Reducer错误处理不匹配：当前Reducer处理的是signin.rejected，但注册功能使用的是register异步Action，导致服务端错误无法被正确处理
3. 前端验证错误被跳转掩盖：表单验证不通过时直接跳转至首页，用户无法看到验证错误提示

具体修复步骤 #

1. 修复组件中的错误捕获逻辑 #

修改handleSubmit函数，在dispatch后调用unwrap()，确保rejected状态的错误能进入catch块：

const handleSubmit = async (e) => {
  e.preventDefault();
  const isValid = validateForm();
  if (!isValid) {
    // 移除跳转逻辑，让用户留在注册页查看错误
    return;
  }
  try {
    // 调用unwrap()捕获rejected状态的错误
    await dispatch(register({ username, email, password })).unwrap();
    // 注册成功后再跳转
    navigate("/");
  } catch (error) {
    if (error.response?.data?.error) {
      setErrors({ message: error.response.data.error });
    } else {
      console.error(error);
    }
  }
};

2. 修正Reducer中的错误处理Case #

将signin.rejected改为register.rejected，确保注册请求的错误被正确处理：

.addCase(register.rejected, (state, action) => {
  state.loading = false;
  state.isAuthenticated = false;
  state.error = action.payload.error || "注册失败，请重试";
  toast.error(state.error);
})

3. 移除表单验证失败后的跳转逻辑 #

删除validateForm返回false时的navigate("/")，让用户留在注册页面查看前端验证错误：

const handleSubmit = async (e) => {
  e.preventDefault();
  const isValid = validateForm();
  if (!isValid) {
    // 移除navigate("/")
    return;
  }
  // ... 后续逻辑
};

可选：通过Redux Store展示服务端错误 #

如果希望通过Redux统一管理错误状态，可以在组件中使用useSelector获取store中的错误信息：

import { useSelector } from "react-redux";

const Signup = () => {
  const authError = useSelector(state => state.auth.error);
  // ... 其他逻辑

  return (
    <div>
      <h2 className="register">Register :</h2>
      {authError && <span className="error">{authError}</span>}
      {errors.email && <span className="error">{errors.email}</span>}
      {errors.password && <span className="error">{errors.password}</span>}
      {/* ... 表单内容 */}
    </div>
  );
};

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