地热React问题及使用效果

2w3kk1z5 于 2023-01-21 发布在 React

关注(0)|答案(2)|浏览(110)

我有一个关于React的问题，虽然我没有太多的经验。我试图用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个位置，但是重复的太多了。控制台输出应该只显示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

react-native

来源：https://stackoverflow.com/questions/62252818/react-question-about-geofire-and-useeffect

2条答案

按热度按时间

lokaqttq1#

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

useEffect(() => {
    if (query) {
      (query as GeoQuery).on(
        'key_entered',
        (key: string, location: [number, number], distance: number) => {
          if (!currentLocation.includes(key)) {
            console.log(key);
            setCurrentLocation([...currentLocation, key]);
          }
        },
      );
    }
  }, [query]); // <-- Add query as dependency

赞(0）回复(0）举报 2023-01-21

juzqafwq2#

下面是代码片段

import GeoFire from 'geofire';

const geoFire = new GeoFire(firebase.database().ref('locations'));

const query = geoFire.query({
  center: [37.7853, -122.4197],
  radius: 5.0
});

query.on('key_entered', (key, location, distance) => {
  firebase.database().ref('data/' + key).once('value', snapshot => {
    const data = snapshot.val();
    console.log(data);
  });
});

赞(0）回复(0）举报 2023-01-21

我来回答

地热React问题及使用效果

2条答案

相关问题

热门标签

最新问答