React Hooks下注册表单提交成功后替换组件的实现问询

在React中，我们不需要手动"销毁"组件——框架会根据组件的状态自动处理DOM的挂载和卸载。我们可以通过添加一个状态变量来控制是显示注册表单还是感谢组件，具体步骤如下：

1. 添加状态变量控制组件显示 #

在你的表单组件内部，使用useState钩子创建一个状态，用来标记注册是否成功：

import { useState } from 'react';

// 组件内部
const [isRegistered, setIsRegistered] = useState(false);

2. 修改registerNewUser函数使其返回Promise #

原来的函数没有返回Promise，导致我们无法在组件里监听请求完成的状态。修改它让它返回Axios的请求Promise：

export const registerNewUser = (user) => { 
  return Axios.post('http://localhost:8080/register', user) 
    .then(function (response) { 
      alert("We've sent you mail! Please confirm your user."); 
      return response;
    }) 
    .catch(function (error) { 
      alert(error); 
      throw error; // 抛出错误，让组件可以捕获处理
    }); 
}

3. 更新handleSubmit函数处理注册成功后的状态切换 #

把handleSubmit改成异步函数，等待注册请求完成后更新状态：

const handleSubmit = async (event) => { 
  event.preventDefault(); // 先阻止默认提交行为
  try {
    await registerNewUser(user);
    setIsRegistered(true); // 注册成功，切换状态
  } catch (err) {
    // 这里可以添加额外的错误处理逻辑（比如显示错误提示组件）
  }
}

4. 根据状态切换渲染内容 #

修改组件的返回值，根据isRegistered的状态决定渲染表单还是感谢组件：

return ( 
  <div className="registerAccountContainer">
    {!isRegistered ? (
      <form onSubmit={handleSubmit}> 
        <input type="email" placeholder="Email" required onChange={handleChange('email')}/> 
        <input type="password" placeholder="Password" required onChange={handleChange('password')}/> 
        <button type="submit"> Register Account </button> 
      </form>
    ) : (
      <p>THANK YOU! We've sent you a confirmation email to complete your registration.</p>
    )}
  </div>
)

为什么这样有效？ #

React是状态驱动的UI框架：当isRegistered从false变为true时，组件会重新渲染，原来的<form>元素会被React自动卸载（相当于你说的"销毁"），同时渲染新的<p>感谢组件。

这种方式符合React的设计理念，避免了手动操作DOM的麻烦，也让组件逻辑更清晰可控。

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