如何将initialRegion设为origin.location经纬度？解决未定义报错

在React Native项目中，尝试将react-native-maps的MapView组件的initialRegion属性设置为从Redux获取的origin.location的经纬度，但持续出现origin.location is undefined的错误，查阅react-native-maps官方文档未找到解决方法。

错误信息 #

控制台提示origin.location is undefined

原代码 #

import { StyleSheet, Text, View } from "react-native";
import React from "react";
import MapView, { Marker } from "react-native-maps";
import tw from "tailwind-react-native-classnames";
import { useSelector } from "react-redux";
import { selectOrigin } from "../slices/navSlice";

const Map = () => {
  const origin = useSelector(selectOrigin);

  return (
    <MapView
      style={tw`flex-1`}
      mapType="mutedStandard"
      initialRegion={{
        latitude: origin.location.lat,
        longitude: origin.location.lng,
        latitudeDelta: 0.005,
        longitudeDelta: 0.005,
      }}
    >
      {origin?.location && (
        <Marker
          coordinate={{
            latitude: origin.location.lat,
            longitude: origin.location.lng,
          }}
          title="Origin"
          description={origin.description}
          identifier="origin"
        />
      )}
    </MapView>
  );
};

export default Map;

const styles = StyleSheet.create({});

解决方法 #

问题根源是组件初始化时，Redux中的origin可能还未被赋值（或值为null/undefined），直接访问origin.location会触发未定义错误。你已经在Marker部分用可选链做了判断，但MapView的initialRegion未做处理，导致报错。

方案1：给initialRegion设置可选链与默认值

修改MapView的initialRegion配置，通过可选链安全访问属性，并设置默认经纬度（可根据需求替换）：

<MapView
  style={tw`flex-1`}
  mapType="mutedStandard"
  initialRegion={{
    latitude: origin?.location?.lat || 37.78825,
    longitude: origin?.location?.lng || -122.4324,
    latitudeDelta: 0.005,
    longitudeDelta: 0.005,
  }}
>
  {/* Marker部分代码保持不变 */}
</MapView>

方案2：条件渲染MapView

先判断origin是否存在有效数据，不存在时渲染加载提示，存在时再渲染MapView：

const Map = () => {
  const origin = useSelector(selectOrigin);

  // 无有效origin数据时显示加载状态
  if (!origin?.location) {
    return (
      <View style={tw`flex-1 justify-center items-center`}>
        <Text>加载中...</Text>
      </View>
    );
  }

  return (
    <MapView
      style={tw`flex-1`}
      mapType="mutedStandard"
      initialRegion={{
        latitude: origin.location.lat,
        longitude: origin.location.lng,
        latitudeDelta: 0.005,
        longitudeDelta: 0.005,
      }}
    >
      <Marker
        coordinate={{
          latitude: origin.location.lat,
          longitude: origin.location.lng,
        }}
        title="Origin"
        description={origin.description}
        identifier="origin"
      />
    </MapView>
  );
};

内容的提问来源于stack exchange，提问作者anasryadi