React Native选择地点跳转地图页出现TypeError错误求助

核心错误点 #

1. Places页面跳转参数错误 #

selectedPlaces状态存储的是选中地点的ID数组，不是完整的place对象。你在handlePress里尝试访问selectedPlaces[0].coordinates，但数组元素是字符串ID，自然没有coordinates属性，这行代码本身就是错误的，且该参数后续未被使用，可直接删除。

2. SelectMap页面数据转换错误 #

你用places.find(({ id }) => id === selectedId)获取选中地点，但selectedId是ID数组，find只会返回第一个匹配的单个对象，导致selectedPlaces变成单个对象而非数组。后续代码里的selectedPlaces[0]、selectedPlaces.map()等数组操作全部失效，直接抛出undefined错误。

修复代码 #

1. 修改Places页面的handlePress函数 #

const handlePress = () => {
  if (selectedPlaces.length > 0) { 
    navigation.navigate("SelectMap", {
      selectedPl: selectedPlaces // 仅传递ID数组即可
    });
  }
};

2. 修改SelectMap页面的数据处理逻辑 #

将find替换为filter，获取所有选中ID对应的place对象数组，同时增加空值判断避免异常：

const SelectMap = ({ route }) => {
  const selectedIds = route.params?.selectedPl || [];
  // 过滤出所有选中ID对应的place对象
  const selectedPlaces = places.filter(place => selectedIds.includes(place.id));

  const renderPlaceMarker = (place) => (
    <Marker
      key={place.id}
      coordinate={{
        latitude: place.coordinates.latitude,
        longitude: place.coordinates.longitude,
      }}
    />
  );

  // 仅当选中地点数>=2时计算路线
  const origin = selectedPlaces.length >= 1 
    ? `${selectedPlaces[0].coordinates.latitude},${selectedPlaces[0].coordinates.longitude}`
    : "";
  const destination = selectedPlaces.length >= 2 
    ? `${selectedPlaces[selectedPlaces.length - 1].coordinates.latitude},${selectedPlaces[selectedPlaces.length - 1].coordinates.longitude}`
    : "";
  const waypoints = [];
  for (let i = 1; i < selectedPlaces.length - 1; i++) {
    waypoints.push(
      `${selectedPlaces[i].coordinates.latitude},${selectedPlaces[i].coordinates.longitude}`
    );
  }

  return (
    <View style={{ flex: 1 }}>
      <Text>选中ID: {JSON.stringify(selectedIds)}</Text>
      <Text>选中地点数: {selectedPlaces.length}</Text>

      <MapView
        style={{ flex: 1 }}
        initialRegion={{
          latitude: 39.706989,
          longitude: 37.029055,
          latitudeDelta: 0.0922,
          longitudeDelta: 0.0421,
        }}
        zoomEnabled={true}
      >
        {/* 存在选中地点时才渲染标记 */}
        {selectedPlaces.length > 0 && selectedPlaces.map(renderPlaceMarker)}
        {/* 选中地点>=2时才渲染路线 */}
        {selectedPlaces.length >= 2 && (
          <MapViewDirections
            origin={origin}
            destination={destination}
            waypoints={waypoints}
            apikey={GOOGLE_MAPS_APIKEY}
            strokeWidth={3}
            strokeColor="blue"
          />
        )}
      </MapView>

      <View
        style={{
          position: "absolute",
          bottom: 0,
          alignSelf: "stretch",
          backgroundColor: "white",
          padding: 10
        }}
      >
        <Text>Selected Places:</Text>
        {selectedPlaces.map((place) => (
          <Text key={place.id}>{place.name}</Text>
        ))}
      </View>
    </View>
  );
};

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