React native react本机映射动态位置导致对未安装的组件进行react状态更新

我有一个

地图视图

组件和一个

标记

组件，如下所示：

    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;

import React，{useContext，useState，useffect}来自“React”；
从“react native”导入{StyleSheet}；
从“react native maps”导入MapView，{PROVIDER_GOOGLE，Marker}；
从“@react native community/Geolocation”导入地理位置；
从“react native root Toast”导入Toast；
从“~/utils/theme context”导入{ThemeContext}；
从“~/utils/MAP.STYLE”导入{MAP_STYLE}；
从“~/styles”导入{Colors}；
常数纬度_δ=0.01；
常数经度_δ=0.01；
常量映射=道具=>{
const themeContext=useContext（themeContext）；
常量映射样式=映射样式；
设map=null；
设initialRegion={
纬度：35.78825，
经度：-120.4324，
纬度德尔塔：0.015，
纵向德尔塔：0.0121，
};
const[region，setRegion]=useState（initialRegion）；
常量getCurrentPosition=Geolocation.getCurrentPosition；
常量mapAnimation=map？.current.animateToRegion；
useffect（（）=>{
常量动画=位置=>{
如果（地图）{
地图动画（位置，1000）；
}
};
常量getPositionHandler=（）=>{
返回getCurrentPosition(
信息=>{
常数位置={
纬度：info.coords.latitude，
经度：info.coords.longitude，
纬度三角洲：纬度三角洲，
经度三角洲：经度三角洲，
};
动画（位置）；
设置区域（位置）；
},
错误=>{
Toast.show（error.message{
背景颜色：Colors.ERROR，
textColor:Colors.WHITE，
});
},
);
};
getPositionHandler（）；
}，[getCurrentPosition，mapAnimation，map]）；
返回(
);
};
const styles=StyleSheet.create({
地图：{
…StyleSheet.absoluteFillObject，
边界半径：24，
},
});
导出默认地图；

---

我似乎陷入了这个问题，尽管这并没有妨碍我进一步编码，但这个错误说明了内存泄漏等问题，这引起了我的一些担忧。请提供帮助

我认为您的

地图

参考可能是这里的问题。它会在每次渲染时初始化，并设置为新渲染贴图的ref。尽管如此，如果地图的动画设置正确，我也不确定

尝试改用

useRef

，看看警告是否消失

const map=useRef（null）

---

const mapAnimation=map.current？animateToRegion
贴图是否正确设置动画？否，它将根据正在更新的状态转到区域。我收到一个错误，在使用useRef时，类型错误：null不是对象（评估“map.current.animateToRegion”）