react - useState从不更新该值

Question

我有这个函数组件:

export default function Proximity (props){
// const [center, setCenter] = useState([3.1397, 101.6852]);
const [lat, setLat] = useState(3.333);
const [lng, setLng] = useState(2.222);

useEffect(()=>{
getLocation()
},[])
function getLocation(){
navigator.geolocation.getCurrentPosition(function(pos) {
console.log(pos.coords.latitude) // <-- 4.444
console.log(pos.coords.longitude)// <-- 5.555
setLat(pos.coords.latitude) ///<-- update lat value
setLng(pos.coords.longitude) ///<-- update lng value
console.log(lat) //<-- 3.333
console.log(lng) //<-- 2.222
});
}
}
...
}

由于某些原因，setLat和setLng从不更新该值。getLocation只是其中一个例子。我有其他函数也使用setLat和setLng，当我得到lat和lng时，我总是得到3.333和2.222。

有什么问题吗?我该如何解决这个问题?

Answer 1

setLat和setLng是异步的，你不能在设置后记录更新的值。在这种情况下，您应该使用useEffect钩子来记录最新的值。比如:

useEffect(() => {
console.log(lat);
}, [lat]);
useEffect(() => {
console.log(lng);
}, [lng]);