有关geofire和useEffect的问题

Question

我对反应有疑问，尽管我没有太多经验。我正在尝试使用geoFire进行查询，并在找到数据库中的数据后获取位置。

[Geofire创建一个我已订阅的活动并向我发送最近的位置。

此刻，我使用geoFire和useEffect进行查询，但我确实更新了data以缓存值。

[更新状态时，此操作将中断geofire事件，必须从头开始重新进行。所以这有问题吗？还是有更好的解决方案？

方法getQuery

const firebaseRef: any = database().ref();
const geoFire = new GeoFire(firebaseRef);

  static getQuery(currentLocation: [number, number], radius: number): GeoQuery {
  return geoFire.query({
    center: currentLocation,
    radius,
  });
}

import React, {useState, useEffect} from 'react';
import {View, Text} from 'react-native';
import {GeoPosition, GeoError} from 'react-native-geolocation-service';
import {GeoQuery} from 'geofire';

import {getCurrentLocation, LocationInfo} from '../../util/geolocation';

import GeoFireService, {EVENT_TYPE} from './services/GeoFireService';
// import AdService from './services/AdService';

interface CurrentLocation {
  [key: string]: {
    location: [number, number];
    distance: number;
  };
}

const Ads = () => {
  const [locationInfo, setLocationInfo] = useState({
    latitude: 0,
    longitude: 0,
    altitude: 0,
    accuracy: 0,
  } as LocationInfo);
  const [query, setQuery]: [GeoQuery | null, Function] = useState(null);
  const [currentLocation, setCurrentLocation] = useState({} as CurrentLocation);

  // set the current location
  useEffect(() => {
    getCurrentLocation(
      (position: GeoPosition) => {
        const {latitude, longitude, accuracy, altitude} = position.coords;
        setLocationInfo({latitude, longitude, accuracy, altitude});
      },
      (err: GeoError) => {
        console.log(err);
      },
    );
  }, []);

  // set the event query
  useEffect(() => {
    (async () => {
      const geoFireQuery = await GeoFireService.getQuery(
        [-34.5742746, -58.4744191],
        30,
      );
      setQuery(geoFireQuery);

      return () => geoFireQuery.cancel();
    })();
  }, []);

  useEffect(() => {
    if (query) {
      (query as GeoQuery).on(
        EVENT_TYPE.KEY_ENTERED,
        (key: string, location: [number, number], distance: number) => {
          console.log(key);
          if (!currentLocation[key]) {
            setCurrentLocation({
              ...currentLocation,
              [key]: {location, distance},
            });
          }
        },
      );
    }
  }, [query, currentLocation]);

  return (
    <View>
      <Text>
        Latitude: {locationInfo.latitude} Longitude: {locationInfo.longitude}
      </Text>

      {Object.keys(currentLocation).map((key: string) => (
        <Text key={key}>
          Ubicacion: {key}, Km: {currentLocation[key].distance.toFixed(2)}
        </Text>
      ))}
    </View>
  );
};

export default Ads;

此刻，我有3个位置，但重复次数过多。控制台输出应仅显示三个位置

[Sun Jun 07 2020 20:06:14.990]  LOG      1wr0cDenn4DmJ8S0xraG
[Sun Jun 07 2020 20:06:14.120]  LOG      58zvRXriUELSW96HprHh
[Sun Jun 07 2020 20:06:14.121]  LOG      58zvRXriUELSW96HprHh
[Sun Jun 07 2020 20:06:14.122]  LOG      58zvRXriUELSW96HprHh
[Sun Jun 07 2020 20:06:14.134]  LOG      58zvRXriUELSW96HprHh
[Sun Jun 07 2020 20:06:14.145]  LOG      1wr0cDenn4DmJ8S0xraG
[Sun Jun 07 2020 20:06:14.158]  LOG      2Y5DBEsPQ1eFosxoAimB
[Sun Jun 07 2020 20:06:14.159]  LOG      2Y5DBEsPQ1eFosxoAimB
[Sun Jun 07 2020 20:06:14.160]  LOG      2Y5DBEsPQ1eFosxoAimB
[Sun Jun 07 2020 20:06:14.174]  LOG      2Y5DBEsPQ1eFosxoAimB
[Sun Jun 07 2020 20:06:14.187]  LOG      1wr0cDenn4DmJ8S0xraG
[Sun Jun 07 2020 20:06:14.188]  LOG      58zvRXriUELSW96HprHh
[Sun Jun 07 2020 20:06:14.189]  LOG      2Y5DBEsPQ1eFosxoAimB
[Sun Jun 07 2020 20:06:14.198]  LOG      1wr0cDenn4DmJ8S0xraG
[Sun Jun 07 2020 20:06:14.199]  LOG      2Y5DBEsPQ1eFosxoAimB
[Sun Jun 07 2020 20:06:14.240]  LOG      2Y5DBEsPQ1eFosxoAimB
[Sun Jun 07 2020 20:06:14.286]  LOG      1wr0cDenn4DmJ8S0xraG

Answer 1

您最后一次useEffect调用正在每个渲染上运行，它需要一个query依赖项。如果您像下面那样更改代码，那就可以了：