навигатор getcurrentlocation звонки навсегда

Question

Почему этот ReactJS код вызывает navigator.geolocation.getCurrentLocation бесконечно? console.log в getCurrentLocation вызывается навсегда. Почему это так?

    const [today, setTodaysWeather] = useState('');
    const [{lat, lng}, setLocation] = useState({lat: 0, lng: 0});

    if(!navigator.geolocation) {
        console.log("gelolocation is not supported by your browser");
    }
    else {
        navigator.geolocation.getCurrentPosition((position) => {
            setLocation({
                lat: position.coords.latitude,
                lng: position.coords.longitude
            });console.log(lat);
        },
        (err) => {
            console.log("Error getting location");
        });
    }

    useEffect(() => {
        fetch("//api.openweathermap.org/data/2.5/weather?lat=" + lat + "&lon=" + lng + "&appid=")
        .then((response) => {
            return response.json();
        })
        .then((json) => {
            setTodaysWeather(json);
        })
    });

Answer 1

Вы должны обернуть этот код в эффект, поскольку этот код изменяет состояние с помощью setLocation, который запускает другой рендер, который рекурсивно запускает ваш код.

useEffect(()=> {
    if(!navigator.geolocation) {
        console.log("gelolocation is not supported by your browser");
    }
    else {
        navigator.geolocation.getCurrentPosition((position) => {
            setLocation({
                lat: position.coords.latitude,
                lng: position.coords.longitude
            });console.log(lat);
        },
        (err) => {
            console.log("Error getting location");
        });
    }

}, [])

Пустой массив как Второй аргумент для выполнения функции гарантирует, что этот код запускается только один раз, во время первого рендеринга компонента.