React中位置权限被拒绝时如何立即隐藏按钮

你的核心问题是没有监听位置权限的动态变化，且未处理getCurrentPosition的错误回调，导致权限状态变更时无法实时更新按钮显示。以下是具体修复方案：

关键修复点 #

• 利用PermissionStatus对象的onchange事件，实时监听权限状态变化
• 给navigator.geolocation.getCurrentPosition添加错误回调，捕获用户拒绝权限的场景
• 组件卸载时清理事件监听，避免内存泄漏

修改后的完整代码 #

import { useEffect, useState } from 'react';
import Button from '@mui/material/Button';
import MyLocation from '@mui/icons-material/MyLocation';
import FormattedMessage from 'react-intl/FormattedMessage';

// 假设已存在变量：sites, country, calculateMapSiteList, classes
const ClinicForm = () => {
  const [findNearestClinicButtonEnable, setFindNearestClinicButtonEnable] = useState(true);
  const [siteId, setSiteId] = useState(null);

  // 监听位置权限状态
  useEffect(() => {
    let permissionStatus;

    const checkLocationPermission = async () => {
      if (!navigator?.permissions) return; // 兼容不支持Permissions API的浏览器

      permissionStatus = await navigator.permissions.query({ name: 'geolocation' });
      // 初始化权限状态
      setFindNearestClinicButtonEnable(permissionStatus.state !== 'denied');
      // 监听权限变化
      permissionStatus.onchange = () => {
        setFindNearestClinicButtonEnable(permissionStatus.state !== 'denied');
        if (permissionStatus.state === 'denied') {
          setSiteId(null); // 权限拒绝时清空站点ID
        }
      };
    };

    checkLocationPermission();

    // 组件卸载时移除监听
    return () => {
      if (permissionStatus) {
        permissionStatus.onchange = null;
      }
    };
  }, []);

  const handleFindNearestSite = () => {
    if (!navigator?.geolocation) return;

    navigator.geolocation.getCurrentPosition(
      (position) => {
        const coords = {
          latitude: position.coords.latitude,
          longitude: position.coords.longitude,
        };
        const { closestSiteId } = calculateMapSiteList(sites, country, coords);
        setSiteId(closestSiteId);
      },
      // 处理权限拒绝等错误
      (error) => {
        if (error.code === error.PERMISSION_DENIED) {
          setFindNearestClinicButtonEnable(false);
          setSiteId(null);
        }
      }
    );
  };

  return (
    <>
      {findNearestClinicButtonEnable && (
        <Button
          onClick={handleFindNearestSite}
          size="small"
          variant="contained"
        >
          <MyLocation className={classes.findNearestIcon} />
          <FormattedMessage
            defaultMessage="Find nearest clinic"
            id="ClinicForm.FindNearestClinic"
          />
        </Button>
      )}
      {/* 其他组件内容 */}
    </>
  );
};

export default ClinicForm;

代码说明 #

1. 实时权限监听：在useEffect中获取PermissionStatus后，通过onchange事件监控权限变更，一旦权限变为denied，立即更新按钮状态。
2. 错误回调处理：当用户在权限弹窗中点击「阻止」时，getCurrentPosition会触发错误回调，这里直接更新状态让按钮立刻隐藏。
3. 兼容性与清理：判断浏览器是否支持Permissions API，同时在组件卸载时移除事件监听，避免内存泄漏。

修改后，无论用户是提前拒绝权限，还是点击按钮时才拒绝，按钮都会立即隐藏，无需刷新页面。

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