ReactJS中阻止站点获取定位后仍显示经纬度的问题修复需求

当前代码存在的问题：允许浏览器获取定位权限时，可正常查看纬度（Latitude）和经度（Longitude）；但阻止站点获取定位权限后，页面既显示“无法获取您的位置”提示，仍会显示之前获取到的经纬度。需求是阻止定位时仅显示错误提示，不展示经纬度。

修改后的代码 #

const GeolocationButton = () => {
    const [lat, setLat] = useState(null);
    const [lng, setLng] = useState(null);
    const [status, setStatus] = useState(null);
  
    const getLocation = () => {
      if (!navigator.geolocation) {
        setStatus('您的浏览器不支持定位功能');
        // 重置经纬度状态
        setLat(null);
        setLng(null);
      } else {
        setStatus('请允许浏览器访问您的位置');
        navigator.geolocation.getCurrentPosition((position) => {
          setStatus(null);
          setLat(position.coords.latitude);
          setLng(position.coords.longitude);
        }, () => {
          setStatus('无法获取您的位置');
          // 定位失败时重置经纬度状态
          setLat(null);
          setLng(null);
        });
      }
    }
  
    return (
      <div className="App">
        <button onClick={getLocation}>获取位置</button>
        <h1>坐标</h1>
        <p>{status}</p> 
        {lat && <p>纬度: {lat}</p>}
        {lng && <p>经度: {lng}</p>}
      </div>
    );
}

export default GeolocationButton

修改说明 #

问题的核心是定位失败时，没有重置lat和lng的状态值，导致之前成功获取到的经纬度依然保存在状态中，从而被页面渲染。只需在两个错误分支（浏览器不支持定位、定位权限被阻止）中，添加setLat(null)和setLng(null)来清空经纬度状态，就能实现需求：当显示错误提示时，经纬度不会被渲染。

内容的提问来源于stack exchange，提问作者sundeep