navigator getcurrentlocation永远调用

Question

为什么这个ReactJS代码无限调用navigator.geolocation.getCurrentLocation？getCurrentLocation中的console.log被永远调用。为什么？

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");
});
}
}, [])

空数组作为作用函数的第二个参数将确保此代码在组件的第一次呈现期间只运行一次。