Question

在位置更新时使用UseEffect内的UsePosition挂钩设置状态时，状态不会反映UsePosition内的坐标。

 const {latitude, longitude, error, timestamp, accuracy} = 
   usePosition(true, {enableHighAccuracy: true});
const [coords, setCoords] = useState({
    lat: null,
    long: null
});

useEffect(() => {       
    setCoords({lat: latitude, long: longitude});              
    console.log(coords.lat + " " + coords.long);  
    console.log(latitude + " " + longitude):
},[latitude, longitude]);

控制台对coords.lat和long保持打印未定义的状态，而对于纬度和经度则保持实际的坐标。我基本上是尝试使用初始坐标来设置初始视口，以便在视口状态下将地图（leftlet-open地图）设置为不固定的位置（仅对于开始时才起作用，因此当移动地图时，视口更新以反映缩放和居中的更改）。反正这样做吗？

Answer 1

就像类组件中的setState一样，useState返回的更新程序函数也是异步的。这意味着您对状态所做的更改不会立即反映在您的状态中。解决此问题的一种可能方法是添加另一个useEffect挂钩，该挂钩在coords更改时运行。

const {latitude, longitude, error, timestamp, accuracy} = 
usePosition(true, {enableHighAccuracy: true});
const [coords, setCoords] = useState({
  lat: null,
  long: null
});

useEffect(() => {       
  setCoords({lat: latitude, long: longitude});
},[latitude, longitude]);

useEffect(() => {
  console.log(coords) // changes will reflect in your state here
}, [coords]);

希望这会有所帮助。

UsePosition Hook

1 个答案: