React开发：注册成功后如何在当前页面展示用户详情

你现有代码存在两个核心问题导致无法实现需求：

1. 页面跳转逻辑navigate('/home')写在了axios异步请求的外层，点击提交后请求刚发出去就会直接跳走，完全不会等待后端返回注册结果
2. 没有定义状态存储注册成功的用户数据，也没有做视图切换的逻辑判断

按以下步骤修改即可： #

1. 补充/清理状态定义 #

首先删掉无用代码：开头的import React, { Component } from 'react'（你用的是函数组件，不需要导入Component）、没用的const flag=0、未使用的useEffect导入可以按需删除。
新增三个状态分别控制注册状态、存储用户信息、存储错误提示：

// 标记是否完成注册，默认false展示注册表单
const [isRegistered, setIsRegistered] = useState(false);
// 存储后端返回的注册用户信息
const [userInfo, setUserInfo] = useState(null);
// 存储注册流程的错误提示
const [errMsg, setErrMsg] = useState("");

2. 修正提交逻辑 #

把原来写在axios外层的跳转逻辑删除，仅在接口请求成功的回调里更新状态、存储用户信息，失败时展示错误提示：

const handleSubmit = (e) => {
  e.preventDefault();
  setErrMsg(""); // 提交前清空历史错误
  const userData = {
    uname: data.uname,
    email: data.email,
    location: data.location,
    budget: data.budget,
    password: data.password
  };
  axios
    .post("http://localhost:8080/api/signup/", userData)
    .then((response) => {
      // 注意：需要后端注册接口成功时返回创建好的用户数据（不要返回明文密码），存在response.data中
      setUserInfo(response.data);
      // 切换状态，隐藏表单展示详情
      setIsRegistered(true);
      // 如果需要延迟几秒跳首页可以放开下面的代码，不需要就删掉
      // setTimeout(() => navigate('/home'), 3000)
    })
    .catch((error) => {
      if (error.response) {
        setErrMsg(error.response.data?.message || "注册失败，请重试");
        console.log(error.response);
      } else if (error.request) {
        setErrMsg("网络异常，请检查服务连接");
        console.log("network error");
      } else {
        setErrMsg("请求发送失败，请刷新重试");
        console.log(error);
      }
    });
};

3. 增加条件渲染逻辑 #

调整return部分的JSX，根据isRegistered状态判断是展示用户详情卡片还是注册表单，同时补上错误提示的展示位置：

return (
  <div className="container mt-5" style={{maxWidth: "500px"}}>
    {/* 注册成功后展示用户详情 */}
    {isRegistered && userInfo ? (
      <div className="card p-4 shadow">
        <h3 className="text-center text-success">注册成功</h3>
        <hr />
        <ul className="list-group list-group-flush">
          <li className="list-group-item"><strong>用户名：</strong>{userInfo.uname}</li>
          <li className="list-group-item"><strong>绑定邮箱：</strong>{userInfo.email}</li>
          <li className="list-group-item"><strong>所在地：</strong>{userInfo.location}</li>
          <li className="list-group-item"><strong>账户预算：</strong>{userInfo.budget}</li>
          {userInfo.createTime && <li className="list-group-item"><strong>注册时间：</strong>{new Date(userInfo.createTime).toLocaleString()}</li>}
        </ul>
        <button className="btn btn-primary mt-3 w-100" onClick={() => navigate('/home')}>
          进入系统首页
        </button>
      </div>
    ) : (
      // 原有注册表单
      <form className="card p-4 shadow">
        <h3 className="text-center">Sign Up</h3>
        {/* 错误提示条 */}
        {errMsg && <div className="alert alert-danger py-2 my-2">{errMsg}</div>}
        <div className="mb-3">
          <label>User Name</label>
          <input
            type="text"
            name="uname" 
            value={data.uname}
            className="form-control"
            placeholder="User name"
            onChange={handleChange}
          />
        </div>

        <div className="mb-3">
          <label>Email address</label>
          <input
            type="email"
            name="email" 
            value={data.email}
            className="form-control"
            placeholder="Enter email"
            onChange={handleChange}
          />
        </div>
        <div className="mb-3">
          <label>Location</label>
          <input
            type="text"
            name="location" 
            value={data.location}
            className="form-control"
            placeholder="Location"
            onChange={handleChange}
          />
        </div>
        <div className="mb-3">
          <label>Budget</label>
          <input
            type="Number"
            name="budget" 
            value={data.budget}
            className="form-control"
            placeholder="Budget"
            onChange={handleChange}
          />
        </div>
        <div className="mb-3">
          <label>Password</label>
          <input
            type="password"
            name="password" 
            value={data.password}
            className="form-control"
            placeholder="Enter password"
            onChange={handleChange}
          />
        </div>
        <div className="d-grid">
          <button type="submit" onClick={handleSubmit} className="btn btn-primary">
            Sign Up
          </button>
        </div>
        <p className="forgot-password text-right mt-2 mb-0">
          Already registered <a href="/sign-in">sign in?</a>
        </p>
      </form>
    )}
  </div>
);

注意事项 #

• 必须确保后端注册接口在成功创建用户后，将用户信息（禁止返回明文密码）放在响应体中返回，前端才能拿到数据渲染
• 如果需要保留用户登录态，可以在注册成功后把后端返回的token、用户信息存在localStorage或者全局状态管理里，避免刷新页面丢失登录状态
• 现有代码中表单提交同时绑定了按钮的onClick和form的提交事件，建议把onClick={handleSubmit}移到form标签上改成onSubmit={handleSubmit}，避免触发重复提交

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