React useEffect 在每次更新时避免更新回调 [英] React useEffect avoid update callback in every update

问题描述

有没有办法避免更新 useEffect 中的回调?.例如，我订阅了一个 geofire，这将侦听更改并接收位置.

Is there a way to avoid update a callback in useEffect?. For example I am subscribed an event with geofire, this listens for changes and receive locations.

我需要更新我的状态，而不需要在每次更新时都订阅.

I need to update my state without subscribing every time on every update.

1. 订阅了 geofire 并接收位置 (A)
2. 使用新位置 (A) 更新我的状态
3. 再次订阅 geofire 并接收位置 (A)

这是一个无限循环.而我无法接收其他位置

this is an infinite loop. And I can't receive the other locations

1. 仅订阅 geofire 一次并接收位置(A、B、C)
2. 使用新位置(A、B、C)更新我的状态

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

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

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

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 [currentLocation, setCurrentLocation] = useState({});

  // 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);
      },
    );
  }, []);

  // get ads
  useEffect(() => {
    (async () => {
      if (locationInfo.latitude === 0 && locationInfo.longitude === 0) {
        return null;
      }

      // this must be execute only once
      await GeoFireService.queryToRadius(
        [-34.5742746, -58.4744191],
        30,
        (key: string, location: [number, number], distance: number,) => {
          // update state 
          setCurrentLocation({
            ...currentLocation,
            [key]: {location},
          });
        },
      );
    })();
  }, [locationInfo, currentLocation]);
// [locationInfo] with this option the update does not work

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

      {Object.keys(currentLocation).map((key: string) => (
        <Text key={key}>Ubicacion: {currentLocation[key].location}</Text>
      ))}
    </View>
  );
};

export default Ads;

推荐答案

您是否检查过返回条件是否适用于页面加载(只需在其中放置一个控制台日志)?

Have you checked if the return conditional is working on page load (just put a console log in there)?

从阅读来看，似乎两个 useEffects 在页面加载时都会被调用，但第二个应该立即退出，然后在第一个完成后再次调用.

From reading it, it seems both useEffects get called on page load, but the second one should exit immediately, and then get called again after the first one completes.

然后我注意到你通过异步回调更新状态，这可能与它有关.如果没有看到它的实际效果，很难说.

Then I notice you update state through an async call back, which may have something to do with it. It's difficult to say without seeing it in action.

我想说尝试用函数而不是对象重写你的 setCurrentLocation:

I would say try rewriting your setCurrentLocation with a function rather than object:

setCurrentLocation((currentLocation) => ({
    ...currentLocation,
    [key]: {location},
}));

也许它没有通过并在新旧数据之间切换.

Maybe its not getting passed through and toggling between new and old data.

这篇关于React useEffect 在每次更新时避免更新回调的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！