ClearInterval 在 React Native 中不起作用

Question

當用戶不在詳細信息部分並且匹配狀態為 1 時，我嘗試清除間隔，我的代碼如下：

useEffect(() => {
    console.log(section)
    console.log('ini interval lo', interval)
    if (section !== "detailCheckIn") {
      clearInterval(interval);
      console.log('aa', clearInterval(interval) ? true : false)
    }

    console.log('section di : ', section)
  }, [section]);

  const checkStatus = (data) => {
    console.log('datanya nih ', data)

    interval = setInterval(() => {

      console.log('ini test interval', userToken)
      consume.getWithParams('CheckinInfo', {}, { token     }, { checkin_id: data })
        .then(response => {

          console.log('ini tuh response', response)
          //ubah jadi 1 kalomau final test
          if (response.result.status === 1) {
            navigation.navigate('Service')
            clearInterval(interval);
            console.log('di clear')
            AsyncStorage.setItem('isCheckIn', 'udah check in nih')
          }

        })
        .catch(err => {
          console.log(err)
          console.log('token error', token)
        })

    }, 2000);
  }

當我在控制台記錄清除間隔時，返回 false

Answer 1

嘗試這個。 請注意使用useRef來存儲對_interval的單個引用，以及它是如何僅通過函數clearCurrentInterval和replaceCurrentInterval更改的。

如果你只通過這兩個函數更新你的間隔，你可以確定你一次只會有一個間隔，因為你之前的間隔總是首先被清除。

  const _interval = useRef(null);
  const interval = () => _interval.current;

  const clearCurrentInterval = () => {
    clearInterval(interval());
  };

  const replaceCurrentInterval = (newInterval) => {
    clearCurrentInterval();
    _interval.current = newInterval;
  };

  useEffect(() => {
    console.log(section);
    console.log("ini interval lo", interval());
    if (section !== "detailCheckIn") {
      clearCurrentInterval();
    }

    console.log("section di : ", section);
  }, [section]);

  const checkStatus = (data) => {
    console.log("datanya nih ", data);

    const newInterval = setInterval(() => {
      console.log("ini test interval", userToken);
      consume
        .getWithParams("CheckinInfo", {}, { token }, { checkin_id: data })
        .then((response) => {
          console.log("ini tuh response", response);
          //ubah jadi 1 kalomau final test
          if (response.result.status === 1) {
            navigation.navigate("Service");
            clearCurrentInterval();
            console.log("di clear");
            AsyncStorage.setItem("isCheckIn", "udah check in nih");
          }
        })
        .catch((err) => {
          console.log(err);
          console.log("token error", token);
        });
    }, 2000);

    replaceCurrentInterval(newInterval);
  };

但是，根據您使用它的方式，您最好只使用一個useEffect在組件安裝時創建一個間隔，並在它卸載或獲取您想要的 API 響應時清除它。