React.js中如何显示提示消息几秒后跳转至其他路由？

你的代码存在两个核心问题，直接修改即可实现需求，不需要使用useEffect：

核心问题 #

1. setTimeout调用错误：你直接执行了navigate("/login")，这会导致页面立即跳转，而非等待5秒。setTimeout的第一个参数需要是一个函数，而非函数调用结果。
2. setMessage逻辑错误：当前代码无论请求成功还是失败，最后都会执行setMessage("Check your inbox...")，会覆盖错误情况下的提示消息。

修正后的代码 #

async function handleResetPassword(e) {
  e.preventDefault();
  try {
    setMessage("");
    await passwordResetEmail(emailRef.current.value);
    // 请求成功后设置提示消息
    setMessage("Check your inbox and follow the instruction in email");
    // 用箭头函数包裹navigate，实现5秒后跳转
    setTimeout(() => navigate("/login"), 5000);
  } catch (error) {
    console.log(error);
    // 请求失败时设置错误提示
    setMessage("Failed to send password reset email");
  }
}

关键说明 #

• 正确使用setTimeout：通过箭头函数() => navigate("/login")，把跳转逻辑包装成延迟执行的函数，确保5秒后才触发路由跳转。
• 调整提示消息位置：将成功提示移到try块内部的await之后，失败提示留在catch块中，避免消息被错误覆盖。
• 全程无需useEffect：因为延迟跳转的逻辑是在异步请求成功后直接触发的，完全可以在事件处理函数内部完成。

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