React Native详情页经纬度取值报错求助（undefined is not an object）

我帮你排查了代码里的几个关键问题，这就一步步帮你解决：

1. 先修复低级拼写错误 #

你在DetailScreen里写了 item.geometry.coordiante[1]，这里的coordiante明显是拼写错误，正确的应该是coordinate。这个小错误会直接导致JS找不到对应的属性，抛出undefined is not an object的错误。

2. 必须增加数据存在性校验 #

API返回的数据大概率会存在部分字段缺失的情况（比如某些列表项没有geometry属性），直接链式访问深层属性肯定会踩坑。这里推荐两种安全取值的方式：

• 使用可选链操作符?.（React Native默认支持ES2020语法，直接用就行）
• 手动做多层条件判断兜底

3. 修正ListScreen的state不一致问题 #

你在ListScreen的构造函数里初始化的是dataSource: []，但在getRemoteData里更新的却是data: res.records，这会导致后续渲染列表时拿不到正确的数据源，传递给详情页的item数据自然也可能不完整，这也是潜在的问题根源。

4. 补全MapView Marker的坐标 #

你代码里的Marker坐标是{{latitude: , longitude: }}，完全是空的，必须填上和initialRegion一致的经纬度值才行。

5. 确认经纬度的顺序 #

注意！很多地理数据API返回的坐标顺序是[经度, 纬度]，但React Native的MapView要求latitude（纬度）在前，longitude（经度）在后，所以一定要先确认API返回的coordinate数组顺序，如果搞反了地图肯定显示不对。

修复后的完整代码示例 #

ListScreen 修复版

class ListScreen extends React.Component { 
  constructor() { 
    super(); 
    // 统一state字段名，避免混乱
    this.state = { data: [], }; 
    this.getRemoteData(); 
  } 

  static navigationOptions = { title: 'Home', }; 

  getRemoteData = () => { 
    const url = "https://***"; 
    fetch(url) 
      .then(res => res.json()) 
      .then(res => { 
        // 先确认返回的records是数组格式，避免后续渲染出错
        if (Array.isArray(res.records)) {
          this.setState({ data: res.records }); 
        } else {
          console.log("API返回的records不是有效数组");
        }
      }) 
      .catch(error => { 
        console.log(`获取数据失败：${url}，错误信息：${error}`); 
      }); 
  };

  // 补全你之前缺失的render方法
  render() {
    return (
      <FlatList
        data={this.state.data}
        renderItem={({item}) => this.renderNativeItem(item)}
        keyExtractor={(item) => item.id?.toString() || Math.random().toString()} // 用唯一标识作为key
      />
    );
  }

  renderNativeItem = (item) => { 
    return <ListItem roundAvatar subtitle={item.fields?.station_name} onPress={() => this.onPressItem(item)} />; 
  } 
  
  onPressItem = (item) => { 
    this.props.navigation.navigate('Detail', {item: item}) 
  }
}

DetailScreen 修复版

class DetailScreen extends React.Component { 
  _goHome = () => {
    this.props.navigation.goBack();
  }

  render() { 
    // 先给item做兜底，避免参数不存在时出错
    const item = this.props.navigation.state.params?.item || {}; 
    // 安全提取经纬度，同时确认顺序（这里假设API返回的是[经度, 纬度]，所以交换索引）
    const latitude = item.geometry?.coordinate?.[1]; 
    const longitude = item.geometry?.coordinate?.[0]; 

    return ( 
      <View style={styles.container}> 
        {/* 只有经纬度都有效时才渲染地图，否则显示提示 */}
        {latitude && longitude ? (
          <MapView 
            style={styles.map} 
            initialRegion={{ 
              latitude, 
              longitude, 
              latitudeDelta: 0.01, // 0.0的话地图会缩到最小，设置合理的缩放值
              longitudeDelta: 0.01, 
            }} 
          > 
            <MapView.Marker 
              coordinate={{latitude, longitude}} 
              title={item.fields?.station_name || '站点'} 
              description="站点位置" 
            /> 
          </MapView>
        ) : (
          <Text style={styles.text}>暂无该站点的地理位置信息</Text>
        )}
        
        <Text style={styles.text}>名称: {item.fields?.nbebike || '暂无数据'}</Text> 
        <Button title="返回首页" onPress={this._goHome} /> 
      </View> 
    ); 
  } 
}

额外小提示 #

• 调试时可以在getRemoteData里加console.log(res.records)，直接查看API返回的完整数据结构，确认geometry.coordinate的存在性和顺序，这能帮你快速定位问题。
• 如果你升级到React Navigation 5+，推荐使用this.props.route.params来获取跳转参数，this.props.navigation.state.params是旧版本的写法，虽然能用，但新写法更规范。

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