ReactJS：实现无效验证提示5秒后自动消失的问题

我明白你的问题了——多次提交表单时，之前设置的setTimeout还没触发，新的定时器又被创建，最后多个定时器同时修改errors状态，就会出现卡顿或者状态异常的情况。这是因为每次提交都生成了独立的定时器，没有及时清理掉之前未执行的旧定时器。

下面是具体的解决方案：

核心思路：复用并清理定时器 #

每次提交表单时，先清除之前未执行的定时器，确保同一时间只有一个活跃的定时器在等待触发，避免多定时器冲突修改状态。

1. 用useRef存储定时器ID #

useRef的值不会随组件重渲染重置，而且修改它不会触发组件重渲染，非常适合用来保存定时器ID：

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

function YourForm() {
  const [errors, setErrors] = useState({});
  // 用ref保存定时器ID，避免组件重渲染时丢失
  const errorTimerRef = useRef(null);

  // 表单提交处理函数
  const handleSubmit = async (e) => {
    e.preventDefault();

    // 第一步：清除之前未触发的定时器
    if (errorTimerRef.current) {
      clearTimeout(errorTimerRef.current);
    }

    try {
      // 调用你的API提交表单
      await submitFormApi();
      // 提交成功后清空错误状态
      setErrors({});
    } catch (apiError) {
      // 捕获后端返回的错误并更新状态
      setErrors(apiError.response.data.errors);

      // 第二步：设置新的定时器，5秒后清空错误
      errorTimerRef.current = setTimeout(() => {
        setErrors({});
        // 定时器执行后清空ref，避免内存泄漏
        errorTimerRef.current = null;
      }, 5000);
    }
  };

  // 可选：组件卸载时清理定时器，防止内存泄漏
  useEffect(() => {
    return () => {
      if (errorTimerRef.current) {
        clearTimeout(errorTimerRef.current);
      }
    };
  }, []);

  // ... 表单渲染代码
}

2. 为什么这个方案有效？ #

每次用户提交表单时，我们都会先把之前还在等待的定时器清除掉，这样不管用户连续提交多少次，只有最后一次提交对应的定时器会在5秒后触发。不会出现多个定时器同时修改errors状态的情况，自然就解决了卡顿问题。

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