React-使用`useEffect`时，经度和纬度状态不正确

问题的原因是 useEffect 在 render 函数之后异步地更新状态。这意味着当 useEffect 启动时，它可能会基于旧值计算新状态，而不是基于最新的状态。为了解决这个问题，我们可以使用 useRef 钩子来存储最新的状态，并在每次更新后手动更新它。

例如，我们可以创建一个名为 useLatestRef 的自定义钩子：

import { useEffect, useRef } from 'react';

function useLatestRef(value) {
  const ref = useRef(value);
  useEffect(() => {
    ref.current = value;
  });
  return ref;
}

然后，在组件中使用此自定义钩子来存储经度和纬度状态：

import { useState, useEffect } from 'react';
import useLatestRef from './useLatestRef';

function MyComponent() {
  const [latitude, setLatitude] = useState(null);
  const [longitude, setLongitude] = useState(null);
  const latestLatitude = useLatestRef(latitude);
  const latestLongitude = useLatestRef(longitude);

  useEffect(() => {
    // 获取位置信息
    navigator.geolocation.watchPosition(
      position => {
        // 更新经度和纬度状态
        setLatitude(position.coords.latitude);
        setLongitude(position.coords.longitude);
      },
      error => console.log(error)
    );
  }, []);

  // 当经度或纬度状态更新时，输出最新的状态
  useEffect(() => {
    console.log('经度：', latestLatitude.current);
    console.log('纬度：', latestLongitude.current);
  }, [latestLatitude, latestLongitude]);

  // 渲染组件
  return (
    <div>
      <p>经度：{latestLatitude.current}</p>
      <p>纬度：{latestLongitude.current}</p>
    </div>
  );
}