如何防止复杂的状态变化导致重复的 setTimeout？

问：

对于这个问题所基于的代码的复杂性，我深表歉意，但似乎问题本身是由复杂性引起的。我无法用一个更简单的例子来复制这个问题。这是有问题的代码存储库分支： https://github.com/chingu-voyages/v42-geckos-team-21/commit/3c20cc55e66e7d0f9122d843222980e404d4910f 左手（更改前）使用 useRef（） 并且没有问题，但我认为 useRef（） 不尊重它的正确用法。

以下是主要问题代码：

import { useState, useRef} from 'react';
import "./Alert.css"
import "animate.css"
import { CSSTransition } from "react-transition-group"
import { time } from 'console';


console.log(typeof CSSTransition);

interface IfcProps {
  text: React.ReactNode,
  exitAfterDuration: number,
  setAlertKey: React.Dispatch<React.SetStateAction<number>>,
  alertKey: number
}

const classNames = {
  appear: 'animate__bounce',
  appearActive: 'animate__bounce',
  appearDone: 'animate__bounce',
  enter: 'animate__bounce',
  enterActive: 'animate__bounce',
  enterDone: 'animate__bounce',
  exit: 'animate__bounce',
  exitActive: 'animate__fadeOut',
  exitDone: 'animate__fadeOut'
}

function Alert(props: IfcProps) {

  const nodeRef = useRef(null);
  

  let [isIn, setIsIn] = useState(false);
  let [previousAlertKey, setPreviousAlertKey] = useState(0);
  let [timeoutId, setTimeoutId] = useState<number | null>(null);


  // console.log('props', {...props});
  console.log('prev, pres', previousAlertKey, props.alertKey)
  console.log('state', {isIn, previousAlertKey, timeoutId});

  // console.log('prev, current:', previousAlertKey, props.alertKey);
  if (props.text === '') {
    // do not render if props.text === ''
    return null;
  } else if (previousAlertKey !== props.alertKey) {
    
    setIsIn(true);
    setPreviousAlertKey(oldPreviousAlertKey => {
      
      oldPreviousAlertKey++
      return oldPreviousAlertKey;
    });


    if (timeoutId) {
      console.log(timeoutId, 'timeout cleared');
      clearTimeout(timeoutId);
    }

    let localTimeoutId = window.setTimeout(() => {
      console.log('executing timeout')
      setIsIn(false);
    }, props.exitAfterDuration);
   
    console.log({localTimeoutId}, previousAlertKey, props.alertKey);
    setTimeoutId(localTimeoutId);


  }
  
 
      


  

  return (
    <CSSTransition nodeRef={nodeRef} in={isIn} appear={true} timeout={1000} classNames={classNames}>
      {/* Using key here to trigger rebounce on alertKey change */}
      <div ref={nodeRef} id="alert" className="animate__animated animate__bounce" key={props.alertKey}>
        {props.text}
      </div>
    </CSSTransition>
  )
}

export default Alert

解决了问题但可能不正确地使用了 useRef（） 的代码：

import { useState, useRef } from 'react';
import "./Alert.css"
import "animate.css"
import { CSSTransition } from "react-transition-group"
import { time } from 'console';


console.log(typeof CSSTransition);

interface IfcProps {
  text: React.ReactNode,
  exitAfterDuration: number,
  setAlertKey: React.Dispatch<React.SetStateAction<number>>,
  alertKey: number
}

const classNames = {
  appear: 'animate__bounce',
  appearActive: 'animate__bounce',
  appearDone: 'animate__bounce',
  enter: 'animate__bounce',
  enterActive: 'animate__bounce',
  enterDone: 'animate__bounce',
  exit: 'animate__bounce',
  exitActive: 'animate__fadeOut',
  exitDone: 'animate__fadeOut'
}

function Alert(props: IfcProps) {

  const nodeRef = useRef(null);
  const timeoutIdRef = useRef<number | null>(null);

  let [isIn, setIsIn] = useState(false);
  let [previousAlertKey, setPreviousAlertKey] = useState(0);

  console.log({props});
  console.log('state', {isIn, previousAlertKey, timeoutIdRef});

  console.log('prev, current:', previousAlertKey, props.alertKey);
  if (props.text === '') {
    // do not render if props.text === ''
    return null;
  } else if (previousAlertKey !== props.alertKey) {
    
    setIsIn(true);
    setPreviousAlertKey(oldPreviousAlertKey => {
      
      oldPreviousAlertKey++
      return oldPreviousAlertKey;
    });


    if (timeoutIdRef.current) {
      console.log(timeoutIdRef.current, 'timeout cleared');
      clearTimeout(timeoutIdRef.current);
    }

    let localTimeoutId = window.setTimeout(() => setIsIn(false), props.exitAfterDuration);
   
    console.log({localTimeoutId}, previousAlertKey, props.alertKey);
    timeoutIdRef.current = localTimeoutId;
  }
  
      


  

  return (
    <CSSTransition nodeRef={nodeRef} in={isIn} appear={true} timeout={1000} classNames={classNames}>
      {/* Using key here to trigger rebounce on alertKey change */}
      <div ref={nodeRef} id="alert" className="animate__animated animate__bounce" key={props.alertKey}>
        {props.text}
      </div>
    </CSSTransition>
  )
}

export default Alert

当尝试将无效行提交到数据库并出现警报组件时，问题会显示其头。如果以这种方式触发多个警报，则当第一个 setTimeout 过期时，它们都会消失，因为它从未被正确清除。应该清除一个超时，但由于 React 严格模式渲染两次，并且创建超时是一个副作用，因此额外的超时永远不会被清除。React 不知道每次提交尝试（复选标记单击）都会运行两次超时。

我可能错误地处理了我的警报组件，例如alertKey。

我觉得我的问题与以下事实有关：我的 setTimeout 是在 Alert 组件内部触发的，而不是在 Row 组件的 onClick（） 处理程序中触发的，因为我在一个更简单的示例中这样做了，它没有表现出这个问题。

我担心我可能不会得到任何回复，因为这是一个非常丑陋和复杂的案例，需要对开发环境进行相当多的设置。在这种情况下，我只需要拼凑一个解决方案（例如使用 useRef），并通过经验在未来学习正确的 React 方式。隧道视觉是我的缺点之一。