ClearInterval 在 React Native 中不起作用

问题描述

当用户不在详细信息部分时，我尝试清除间隔，如果匹配状态为 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

解决方法

试试这个。请注意使用 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 响应时清除它.

intervals javascript