while 循环在 useEffect 挂钩中不起作用

Question

我想每 7 秒获取一次设备位置设置使用当前位置值设置状态。我在 useEffect 钩子中做一个 while 循环并使用 setTimeot 等待 7 秒。但是 while 循环永远不会执行。这种方法有什么问题，我该如何解决这个问题？

const sleep = (milliseconds) => {
    setTimeout(() => { }, milliseconds)
}


const getPosition = () => {
    
        while (true) {
            GetLocation.getCurrentPosition({
                enableHighAccuracy: true,
                timeout: 15000,
            })
                .then(location => {
                    const { latitude, longitude, altitude, accuracy } = location
                    setPosition({ lat: latitude, lon: longitude, alt: altitude, acc: accuracy })
                    alert("latitude: " + latitude + "\nlongitude: " + longitude)
                    setLoading(false)
                })
                .catch(err => alert(err))
            sleep(7000)
        }
          
}


useEffect(() => {
    getPosition()

}, [])

Answer 1

我不是 100% 明白为什么 whuile(true) 不起作用... 但是你为什么不使用“setTimeout的兄弟”setInterval :

const getPosition = () => {
  GetLocation.getCurrentPosition({
    enableHighAccuracy: true,
    timeout: 15000,
  })
    .then((location) => {
      const { latitude, longitude, altitude, accuracy } = location;
      setPosition({
        lat: latitude,
        lon: longitude,
        alt: altitude,
        acc: accuracy,
      });
      alert('latitude: ' + latitude + '\nlongitude: ' + longitude);
      setLoading(false);
    })
    .catch((err) => alert(err));
};

useEffect(() => {
  const intervalID = setInterval(getPosition, 7*1000);

  // Don't forget to clear the interval when unmounting the component :
  return () => {
    clearInterval(intervalID);
  };
}, []);

Answer 2

这是使用 setTimeout 的方法。

以下文章解释了选择一个而不是另一个的一些微妙之处。

TLDR setTimeout 通常是更好的选择

Repeated Events: Timeout or Interval?

const loopInterval = 7*1000;
let loop;

const getPosition = () => {
  GetLocation.getCurrentPosition({
    enableHighAccuracy: true,
    timeout: 15000,
  })
  .then((location) => {
    const { latitude, longitude, altitude, accuracy } = location;
    setPosition({
      lat: latitude,
      lon: longitude,
      alt: altitude,
      acc: accuracy,
    });
    alert('latitude: ' + latitude + '\nlongitude: ' + longitude);
    setLoading(false);
    loop = setTimeout(getPosition, loopInterval);
  })
  .catch((err) => alert(err));
};

useEffect(() => {
  loop = setTimeout(getPosition, loopInterval);
  // Clear the timeout when unmounting the component :
  return () => {
    clearTimeout(loop);
  };
}, []);

while 循环在 useEffect 挂钩中不起作用

while loop is not working in useEffect hook

while-loop

settimeout

react-native

react-hooks

use-effect