使用 Effect 和 getPermissionAsync

Question

不幸的是，我正在努力处理 React Native 中的钩子生命周期。我在顶层有两个钩子。

const permission = useLocationPermission();
const location = useCurrentLocation(locationPermission);

第一个处理定位权限权限，请用户grand。

export default function useLocationPermission() {
  const [hasLocationPermission, setHasLocationPermission] = useState(false);
  const appState = useRef(AppState.currentState);

  useEffect(() => {
    
    hasPermission();
  }, []);

  const hasPermission = async () => {
    const { granted } = await Location.getForegroundPermissionsAsync();
    if (!granted) {
      const { granted: request } =
        await Location.requestForegroundPermissionsAsync();
      if (!request) {
        Alert.alert(
          "Some Message"
        );
        setHasLocationPermission(false);
      } else {
        setHasLocationPermission(true);
      }
    } else {
      setHasLocationPermission(true);
    }
  };
  
  return hasLocationPermission;
}

第二个处理当前位置。

export default function useCurrentLocation(hasPermission: boolean) {
  const [currentLocation, setCurrentLocation] = useState<LatLng>(initLocation);

  useEffect(() => {
    console.log(hasPermission);

    if (hasPermission) {
      setWatcher();
      
      getCurrentPosition().then((locationObject) => {
        setCurrentLocation({
          latitude: locationObject.coords.latitude,
          longitude: locationObject.coords.longitude,
        });
      });
    } else {
      setCurrentLocation(initLocation);
    }
  }, []);

  const getCurrentPosition = async () => {
    return Location.getCurrentPositionAsync({});
  };

  const setWatcher = async () => {
    await Location.watchPositionAsync({ distanceInterval: 5 }, (locaction) => {
      setCurrentLocation({
        latitude: locaction.coords.latitude,
        longitude: locaction.coords.longitude,
      });
    });
  };
  return currentLocation;
}

我的问题是在用户授予权限之后。该位置将不再更新（仍然是初始位置）。好像第二个钩子只叫ones。是否有任何最佳做法来处理这种情况。所以设置权限后会更新location和watcher。

非常感谢。

Answer 1

您设置当前位置的效果的依赖项列表为空。由于您是说您希望该效果取决于 hasPermission，因此请将其设置为 [hasPermission]。

使用 Effect 和 getPermissionAsync

UseEffect with getPermissionAsync

react-native

react-hooks

use-effect