React中setTimeout未按3秒延迟执行 成功提示直接显示问题排查

你的代码核心错误出在setTimeout的传参写法上：
setTimeout 要求第一个参数传入待延迟执行的函数引用，但你直接写了setMessage("successFully sent")——这行代码会在JS执行到then回调时立刻调用，直接触发状态更新让提示显示，根本不会等待3秒。最终setTimeout接收到的第一个参数是setMessage执行后的返回值（undefined），你设定的延迟逻辑完全没有被绑定到定时器上。

根据你要实现的「提交成功后提示仅展示3秒」的交互，对应两种常见需求调整即可：

• 常规交互（提交成功立刻显示提示，3秒后自动隐藏）：不需要延迟触发提示显示，而是在提示显示后加定时器清空提示状态，参考代码如下：

const [message, setMessage] = useState('')

function handleSubmit (e) {
  e.preventDefault()
  emailjs.sendForm(process.env.SERVICE_ID,process.env.TEMPLATE_ID, form.current,process.env.PUBLIC_KEY)
  .then(function(response) {
    // 提交成功立刻展示提示
    setMessage("successFully sent")
    // 3秒后清空提示，实现仅展示3秒的效果
    setTimeout(() => {
      setMessage('')
    }, 3000)
  }, function(err) {
    console.log('FAILED...', err);
  });
}

• 延迟显示交互（提交成功后等待3秒再弹出提示）：把setMessage的调用包裹在匿名函数里，作为函数引用传给setTimeout即可，参考代码如下：

.then(function(response) {
  setTimeout(() => {
    setMessage("successFully sent")
  }, 3000)
}, function(err) {
  console.log('FAILED...', err);
})

提示：如果组件可能在定时器触发前卸载，建议在useEffect的清理函数里清除定时器，避免内存泄漏。

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