React中多次点击触发onClick时如何刷新setTimeout定时器重置提示消失时间

核心问题原因 #

你之前尝试连续设置setAlert(false)再setAlert(true)不生效，是因为React会批量处理同个事件回调内的状态更新，两次操作会被合并为最终设置alert = true，和原有状态一致的情况下不会触发重渲染，依赖alert的useEffect自然不会执行，定时器无法重置。

方案1：用useRef存储定时器ID（最简便） #

直接在点击回调内处理定时器的清理与重置，不需要依赖状态变更触发useEffect：

import { useRef, useEffect, useState } from 'react';

// 组件内声明
const timerRef = useRef(null);
const [alert, setAlert] = useState(false);

// 点击逻辑修改
onClick={() => {
  // 清理上一次的定时器
  if (timerRef.current) clearTimeout(timerRef.current);
  setAlert(true);
  navigator.clipboard.writeText(hexValue);
  // 新建定时器并存入ref
  timerRef.current = setTimeout(() => {
    setAlert(false);
  }, 3000);
}}

// 新增组件卸载时的定时器清理，避免内存泄漏
useEffect(() => {
  return () => {
    if (timerRef.current) clearTimeout(timerRef.current);
  };
}, []);

原有的依赖alert的useEffect可以直接移除。

方案2：修改状态为数值类型触发更新 #

如果不想引入额外的ref，可以把控制提示的状态从布尔值改为数值，每次点击自增保证状态一定会变更，触发useEffect重置定时器：

// 把原来的alert布尔状态替换为数值类型
const [alertVersion, setAlertVersion] = useState(0);

// 点击逻辑修改
onClick={() => {
  setAlertVersion(prev => prev + 1);
  navigator.clipboard.writeText(hexValue);
}}

// useEffect依赖修改为alertVersion
useEffect(() => {
  // 初始状态为0时不处理
  if (alertVersion === 0) return;
  const timeout = setTimeout(() => {
    setAlertVersion(0);
  }, 3000);
  return () => clearTimeout(timeout);
}, [alertVersion]);

// 渲染判断逻辑修改
{alertVersion > 0 && <p className="alert">copied to clipboard</p>}

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