Question

我在react native-react-native-maps中用于地图。

我需要从json文件向地图渲染标记。

但是发生错误：

TypeError: TypeError: undefined is not an object (evaluating 'this.state.dataSource.map')

完整的代码块如下所示：

 {this.state.dataSource.map(item => (
 <Marker coordinate={item.latlng} />
   ))}

我从json文件中获取的标记的坐标，也许错误在这里？

"latlng": {
      "latitude": 53.6937,
      "longitude": -336.1968
    },

我需要您的帮助。完整代码：

export default class MapScreen extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      title: "Map",
      region: {
        latitude: 53.67,
        longitude: 23.83,
        latitudeDelta: 0.04,
        longitudeDelta: 0.09
      }
    };
  }

  componentDidMount() {
    return fetch(url)
      .then(response => response.json())
      .then(responseJson => {
        this.setState(
          {
            dataSource: responseJson
          },
          function() {}
        );
      })
      .catch(error => {
        console.error(error);
      });
  }

  render() {
    const { title } = this.state;
    return (
      <View style={{ flex: 1, backgroundColor: "#1f1f1f" }}>
        <View style={styles.Header}>
          <HeaderProfile title={title} />
        </View>
        <MapView
          region={this.state.region}
          style={{ flex: 1 }}

        >
          {this.state.dataSource.map(item => (
            <Marker coordinate={item.latlng} />
          ))}
        </MapView>
      </View>
    );
  }
}

Answer 1

您正在尝试在undefined上调用map（）。

您几乎没有选择：

在状态下定义虚拟dataSource

this.state = { 
  dataSource: [],
  ...

在调用map()之前检查是否已定义数据源：

{this.state.dataSource && this.state.dataSource.map...

如果dataSource是一个对象。 map()仅适用于数组。您需要遍历对象：类似

的东西

Object.keys(dataSource).forEach(key => {
  return (<Marker coordinate={dataSource[key].latlan} />)
});

渲染标记问题|反应本机

1 个答案: