I want get my system geolocation every 5 seconds with useEffect, but I don't know why the navigator.geolocation.getCurrentPosition did not arrive, am I wrong?
const getPosition = () => {
new Promise((resolve, reject) => {
if(!("geolocation" in navigator)) {
reject();
} else {
navigator.geolocation.getCurrentPosition(position => {
console.log('did not arrive here');
const { latitude } = position.coords.latitude;
const { longitude } = position.coords.longitude;
resolve({ latitude,longitude });
})
};
})
.then(async value => {
const { latitude, longitude } = value;
const data = await axios.get(`http://10.0.0.54:8000/api?latitude=${latitude}&longitude=${longitude}`);
return data.data
})
};
export default function Weather() {
const [observationalData, setObservationalData] = useState({
stationId: '',
stationName: '',
timestamp: 0,
time: '',
observationDate: '',
observationTime: '',
temperature: 0,
weather: '',
title: '',
humidity: 0
});
console.log(getPosition());
useEffect(()=> {
const timer = setInterval(getPosition, 5000);
console.log(new Date());
return ()=> {
clearInterval(timer);
}
});
useEffect(()=> {
setObservationalData(getPosition());
console.log(observationalData);
}, []);
}
the console.log('did not arrive here') did not work, so I can't resolve that promise, when call useEffect, I just get "undefined"
export default function Weather() {
const [observationalData, setObservationalData] = useState({
stationId: "",
stationName: "",
timestamp: 0,
time: "",
observationDate: "",
observationTime: "",
temperature: 0,
weather: "",
title: "",
humidity: 0,
});
var options = {
enableHighAccuracy: true,
timeout: 5000,
maximumAge: 0,
};
const getPosition = (data) => {
//use data to destructure
//setObservationalData(customdata);
};
function error(err) {
console.warn(`ERROR(${err.code}): ${err.message}`);
}
useEffect(() => {
const timer = setInterval(getPosition, 5000);
console.log(new Date());
return () => {
clearInterval(timer);
};
});
useEffect(() => {
navigator.geolocation.getCurrentPosition(getPosition, error, options);
}, []);
}