如何在useEffect react中取消下次调用到达时的超时

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

const MyComponent = () => {
  const [timerId, setTimerId] = useState(null);
  
  // 其他代码...
}

useEffect(() => {
  const timeoutId = setTimeout(() => {
    // 超时后执行的代码
  }, 1000); // 设置超时时间为1秒
  
  setTimerId(timeoutId);
  
  return () => {
    clearTimeout(timerId); // 组件卸载或下次useEffect执行前，清除定时器
  };
}, []); // 传递空数组作为第二个参数，以便只在组件初次渲染时执行

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

const MyComponent = () => {
  const [timerId, setTimerId] = useState(null);

  useEffect(() => {
    const timeoutId = setTimeout(() => {
      console.log('超时');
    }, 1000);

    setTimerId(timeoutId);

    return () => {
      clearTimeout(timerId);
    };
  }, []);

  return (
    <div>
      {/* 组件的其他内容 */}
    </div>
  );
}

export default MyComponent;