当道具的更新速度快于设置的计时器时，带有计时器的 Api 调用不会触发

Question

我的组件中有 2 个 useEffects，其中包含 setTimeout 和 clearTimeout 方法。 它们都基于相同的道具进行更新，并且它们内部的条件相同，但是设置为每 3 秒触发一次，而另一个应每 1 分钟触发一次。

我的问题是应该每分钟更新一次的问题根本没有触发。

我认为它可能会在每次道具更新时重置（当我在if语句中进行控制台时，它正在安慰时每 3 秒一次）但我不确定如何解决这个问题，因为每次触发第一个道具时道具都会更新。

我的目标是

1. 每 3 秒命中一个端点，直到我得到预期的结果，并且
2. 每 1 分钟记录一次此事件，以免重复发送相同信息的数据库超载。

这些是我的使用效果：

  useEffect(() => {
    if(!providerData?.providerAvailable ) {

      sendMessage({
        code: 'NO_PROVIDER_AVAILABLE',
        value: 'No provider currently available',
      });

      const timerId = window.setTimeout(() => providerRefetch(), 3000);

      return () => window.clearTimeout(timerId);
    } else {
      return;
    }
  }, [providerData]);


  // send No provider event every minute
  useEffect(() => {
    if ( !providerData?.providerAvailable ) {

      const eventId = window.setTimeout(() => sendEvent(), 60000, {
        key: 'NO_PROVIDER_AVAILABLE',
        description: 'No provider currently available',
      });

      return () => window.clearTimeout(eventId);

    } else {
      return;
    }
  }, [providerData]);

Answer 1

我的第二个 useEffect 不是基于与第一个相同的道具，而是创建了一个计数，每次调用第一个时都会递增，而当计数更新时，第二个 useEffect 会更新：

const [callCount, setCallCount] = useState(0);

 useEffect(() => {
    if (
      providerError ||
      (!providerData?.providerAvailable && providerData?.providerState !== 'engaged')
    ) {
      if (callCount < 21) {
        let count = callCount + 1;
        setCallCount(count);
      } else {
        setCallCount(0);
      }

      sendMessage({
        type: 'EVENT',
        code: 'NO_PROVIDER_AVAILABLE',
        value: 'No provider currently available',
      });

      const timerId = window.setTimeout(() => providerRefetch(), 3000);

      return () => window.clearTimeout(timerId);
    } else {
      return;
    }
  }, [providerData, providerRefetch, providerError]);

  // send No provider event every minute
  useEffect(() => {
    if (callCount === 2) {
      
          sendEvent({
            key: 'NO_PROVIDER_AVAILABLE',
            description: 'No provider currently available',
          })

    } else {
      return;
    }
  }, [callCount]);