反应本机地图动态位置导致未安装组件上的反应状态更新答案

【问题标题】：react native maps dynamic location leads to react state update on unmounted component反应本机地图动态位置导致未安装组件上的反应状态更新
【发布时间】：2020-03-09 11:52:13
【问题描述】：

我有一个Mapview 组件和一个Marker 组件，如下所示：

    import React, {useContext, useState, useEffect} from 'react';
import {StyleSheet} from 'react-native';
import MapView, {PROVIDER_GOOGLE, Marker} from 'react-native-maps';
import Geolocation from '@react-native-community/geolocation';
import Toast from 'react-native-root-toast';

import {ThemeContext} from '~/utils/theme-context';
import {MAP_STYLE} from '~/utils/map.style';
import {Colors} from '~/styles';

const LATITUDE_DELTA = 0.01;
const LONGITUDE_DELTA = 0.01;

const Map = props => {
  const themeContext = useContext(ThemeContext);
  const mapStyle = MAP_STYLE;
  let map = null;
  let initialRegion = {
    latitude: 35.78825,
    longitude: -120.4324,
    latitudeDelta: 0.015,
    longitudeDelta: 0.0121,
  };
  const [region, setRegion] = useState(initialRegion);

  const getCurrentPosition = Geolocation.getCurrentPosition;
  const mapAnimation = map?.current.animateToRegion;

  useEffect(() => {
    const animate = location => {
      if (map) {
        mapAnimation(location, 1000);
      }
    };
    const getPositionHandler = () => {
      return getCurrentPosition(
        info => {
          const location = {
            latitude: info.coords.latitude,
            longitude: info.coords.longitude,
            latitudeDelta: LATITUDE_DELTA,
            longitudeDelta: LONGITUDE_DELTA,
          };

          animate(location);
          setRegion(location);
        },
        error => {
          Toast.show(error.message, {
            backgroundColor: Colors.ERROR,
            textColor: Colors.WHITE,
          });
        },
      );
    };
    getPositionHandler();
  }, [getCurrentPosition, mapAnimation, map]);

  return (
    <MapView
      ref={map}
      provider={PROVIDER_GOOGLE}
      style={styles.map}
      customMapStyle={themeContext.theme === 'light' ? [] : mapStyle}
      region={region}>
      <Marker
        coordinate={{latitude: region.latitude, longitude: region.longitude}}
      />
    </MapView>
  );
};

const styles = StyleSheet.create({
  map: {
    ...StyleSheet.absoluteFillObject,
    borderRadius: 24,
  },
});

export default Map;

我似乎陷入了这个问题，即使它不会妨碍我进一步编码，但该错误涉及内存泄漏等问题，这引起了我的一些担忧。请帮忙

【问题讨论】：

地图的动画是否正确？
不，它会根据正在更新的状态进入区域

标签： react-native react-native-maps

【解决方案1】：

我认为您的map ref 可能是这里的问题。它在每次渲染时都被初始化并设置为新渲染地图的参考。不过，如果地图动画正确，那我就不确定了。

尝试改用useRef，看看警告是否消失。

const map = useRef(null)

const mapAnimation = map.current?.animateToRegion;

【讨论】：

我在使用 useRef 时遇到错误，TypeError: null is not an object (evalating 'map.current.animateToRegion')