React用户注册时window.location跳转逻辑问题求助

你的问题出在同步代码和异步代码的执行顺序上，原代码里的alert和跳转注册页的代码是同步执行的，会在fetch请求还没完成时就先运行——不管请求成功还是失败，这些代码都会执行，再加上then里的跳转，就导致了不管结果如何都会跳转到/的混乱情况。

下面是修正后的代码，完美实现你想要的逻辑：

register = event => {
  console.log(this.state.credentials);
  fetch('http://api.herokuapp.com/account/users/', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json'
    },
    body: JSON.stringify(this.state.credentials)
  })
  .then(res => {
    // 先判断响应是否真正成功（HTTP状态码为2xx）
    if (res.ok) {
      window.location.href = '/'; // 注册成功跳转到首页
    } else {
      // 若响应状态码非2xx，手动抛出错误让catch捕获
      throw new Error('Registration failed');
    }
  })
  .catch(error => {
    console.log(error);
    alert("Invalid information, please reenter your details correctly");
    window.location.href = '/Oko/RegisterUser'; // 注册失败跳转回当前注册页
  });
}

关键修改点说明： #

• 移除了原代码中then和catch之外的所有同步跳转/alert代码，避免干扰异步逻辑的执行；
• 在then中增加了res.ok判断，确保只有当请求真正成功时才跳转到首页；如果返回错误状态码（比如400参数错误、500服务器错误），就主动抛出错误进入catch分支；
• 把失败后的错误提示和跳转逻辑完全放到catch中，保证只有当请求出错或响应失败时，才执行这些操作。

这样修改后，就能严格按照你期望的逻辑运行：注册成功跳/，失败则提示错误并回到注册页啦～

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