如何在React条件语句中正确使用setTimeout实现提示自动清除？

你的代码存在3个核心问题，修复后即可正常运行：

• 块级作用域错误：const 是块级作用域，你在两个if判断块内部重新用const声明的timer，和外层一开始赋值为空字符串的timer完全是两个独立变量，最终清理函数执行clearTimeout时，清理的是空字符串，根本清不掉你实际创建的定时器，会导致定时器残留、重复触发状态更新。
• 逻辑不匹配需求：你当前写的是延迟1秒才设置成功/失败状态，且没有加提示展示3秒后自动清除的逻辑，和你一开始提的需求不符。
• 缺少重置逻辑：提示清除后没有重置关联状态，下次同类型结果返回时不会重新触发提示。

可直接运行的正确代码 #

// 接口请求逻辑：拿到响应后直接更新关联状态，不需要套setTimeout延迟
const sendMessage = async () => {
  try {
    const res = await fetch(/* 你的消息发送接口 */)
    // 按需求状态码202为成功，其余为失败
    if (res.status === 202) {
      setKupa("sukces")
    } else {
      setKupa("error")
    }
  } catch (err) {
    setKupa("error")
  }
}

// 监听提示关联状态，处理提示展示、自动清除逻辑
useEffect(() => {
  // 无有效提示状态时直接返回，不创建定时器
  if (!kupa) return

  // 只在外层声明一次timer，不要在内部块重复声明
  let timer
  // 匹配状态设置提示类型，接口返回后立刻展示
  if (kupa === "sukces") {
    setStatus("success")
  }
  if (kupa === "error") {
    setStatus("error")
  }
  // 提示展示3秒后自动清除，重置状态
  timer = setTimeout(() => {
    setStatus(null)
    setKupa(null)
  }, 3000)

  // 清理函数：组件卸载/状态更新时清除上一个定时器，避免内存泄漏、提示异常
  return () => clearTimeout(timer)
}, [kupa])

额外注意事项 #

• 不要在条件判断块内重复声明和外层同名的let/const变量，块级作用域特性会导致外层拿不到块内的赋值。
• 如果短时间内多次触发消息发送，清理函数会自动清掉上一个未执行完的定时器，保证始终只展示最新的提示，不会出现多个提示叠加、提前消失的问题。
• 如果你的页面需要同时展示多个提示，可以把状态改成数组结构，给每个提示加唯一ID单独设置自动清除定时器即可。

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