react-native - setinterval 函数无限运行

Question

const interval = setInterval(() => {
  fire.database().ref().child(getpath())
    .once("value",
      (snapshot) => {
        let item = snapshot.val()
        console.log(item)
        if (item !== null) {
          let array = [];
          Object.
            keys(item)
            .forEach(i => array.push(item[i]));
          setCard1(array);
        }
        console.log(item, "item")
        if (item !== null) {

          itemlen = 7  //length of object I get from valid result
          //stop polling for results
          console.log(itemlen, "should clear")
        }
        else {
          console.log("polling")
        }
      })
}, 1000)
console.log("comingout")
if (itemlen !== 0) {
  console.log("goingIn")
  clearInterval(interval);
}
}, [prefVar]);

预计 clearinterval 会停止 setinterval 函数，但它正在持续运行并且不停止 itemlen 正在获得非零值。有没有更好的方法来实现这个？一旦我从 db 获得有效值，我想停止 useEffect。我在 for setinterval 中的代码选择一个随机路径并检索该路径唯一的问题是有时路径是空的，因此使用 setInterval

标签： react-native

Answer 1

我将创建两个状态项，一个保持间隔，另一个存储itemlen，并使用另一个useEffect来监听对 的更改itemlen，当它不为 0 时，间隔应该清除。另外，我会检查在你开始另一个间隔之前是否有另一个间隔运行。

const [itemlen, setItemlen] = useState(0);
const [pollingInterval, setPollingInterval] = useState(null);
useEffect(() => {
    if (pollingInterval === null) {
        setPollingInterval(setInterval(() => {
            fire.database().ref().child(getpath())
                .once("value",
                    (snapshot) => {
                        let item = snapshot.val()
                        console.log(item)
                        if (item !== null) {
                            let array = [];
                            Object.
                            keys(item)
                                .forEach(i => array.push(item[i]));
                            setCard1(array);
                        }
                        console.log(item, "item")
                        if (item !== null) {
                            setItemlen(7);
                            console.log("should clear")
                        } else {
                            console.log("polling")
                        }
                    })
        }, 1000));
    }
}, [prefVar]);

useEffect(() => {
    if (itemlen !== 0 && pollingInterval !== null) {
        clearInterval(pollingInterval);
        setPollingInterval(null);
    }
}, [itemlen])