javascript - 无法使用地图迭代器显示标记(can't display markers using map iterator)

Question

const places = [
  {
    id: 1,
    title: "foo",
    latitude: 40.283937,
    longitude: -97.742144
  }
];

export default class Map extends Component {
...
renderMarkers() {
return places.map(place => (
      <Marker
        key={place.id}
        title={place.title}
        coordinate={{ latitude: place.latitude, longitude: place.longitude }}
        onCalloutPress={e => Actions.details({ text: place.title })}
      />
    ));
}

import React, { Component, Text } from "react";
import MapView from "react-native-maps";
import { StyleSheet, Dimensions } from "react-native";
import * as Location from "expo-location";
import * as Permissions from "expo-permissions";
import get from "lodash/get";
import { Actions } from "react-native-router-flux";

const Marker = MapView.Marker;

const deltas = {
  latitudeDelta: 0.006866,
  longitudeDelta: 0.01
};

const places = [
  {
    id: 1,
    title: "foo",
    latitude: 40.283937,
    longitude: -97.742144
  }
];

export default class Map extends Component {
  state = {
    myLocation: null,
    places: [],
    errorMessage: null
  };

  componentWillMount() {
    this.getLocationAsync();
  }

  getLocationAsync = async () => {
    let { status } = await Permissions.askAsync(Permissions.LOCATION);
    if (status !== "granted") {
      this.setState({
        errorMessage: "Permission to access location was denied"
      });
    }

    let mylocation = await Location.getCurrentPositionAsync({});
    this.setState({ mylocation });
    console.log(this.state.mylocation);
  };

  renderMarkers() {
    return places.map(place => (
      <Marker
        key={place.id}
        title={place.title}
        coordinate={{ latitude: place.latitude, longitude: place.longitude }}
        onCalloutPress={e => Actions.details({ text: place.title })}
      />
    ));
  }

  render() {
    const { mylocation } = this.state;
    const region = {
      latitude: get(mylocation, "coords.latitude"),
      longitude: get(mylocation, "coords.longitude"),
      ...deltas
    };

    return (
      <MapView
        style={styles.mapStyle}
        region={region}
        showsUserLocation={true}
        zoomEnabled={true}
      >
        {this.renderMarkers()}
      </MapView>
    );
  }
}

const styles = StyleSheet.create({
  mapStyle: {
    width: Dimensions.get("window").width,
    height: Dimensions.get("window").height
  }
});

Array [
  Object {
    "$$typeof": Symbol(react.element),
    "_owner": FiberNode {
      "tag": 1,
      "key": null,
      "type": [Function Map],
    },
    "_store": Object {},
    "key": "0",
    "props": Object {
      "coordinate": Object {
        "latitude": 40.283937,
        "longitude": -97.742144,
      },
      "onCalloutPress": [Function onCalloutPress],
      "stopPropagation": false,
      "title": "foo",
    },
    "ref": null,
    "type": [Function MapMarker],
  },
]

I'm trying to display markers on my react native app using Map.Marker, but it seems like it can't access latitude and longitude of places.

(我正在尝试使用Map.Marker在我的React本机应用程序上显示标记，但似乎无法访问地点的经度和纬度。)

places is declared outside the default class Map.

(在默认类Map之外声明地方。)

Thanks for your help in advance!

(谢谢您的帮助！)

  ask by Grace Kim translate from so

Answer 1

If you don't see markers, it means that component didn't render again.

(如果看不到标记，则表示该组件没有再次渲染。)

You can try to use state.

(您可以尝试使用状态。)

If doesn't work, you can try forceUpdate in your renderMarkers method.

(如果不起作用，则可以在renderMarkers方法中尝试forceUpdate。)

 state = {
        myLocation: null,
        places: [{
        id: 1,
        title: "foo",
        latitude: 40.283937,
        longitude: -97.742144
      }],
        errorMessage: null
      };

renderMarkers() {
return this.state.places.map(place => (
      <Marker
        key={place.id}
        title={place.title}
        coordinate={{ latitude: place.latitude, longitude: place.longitude }}
        onCalloutPress={e => Actions.details({ text: place.title })}
      />
    ));
}