Использование функции карты в React Native

Question

Я пытаюсь отобразить маркеры в MapView для каждой позиции, хранящейся в моем массиве состояний, называемой маркерами, но по какой-то причине, когда я пытаюсь сослаться на состояние внутри функции карты, я получаю неопределенное значение. Я проверил синтаксические ошибки, но не смог найти проблему. Обычно каждый раз, когда пользователь меняет свое местоположение, я хочу установить маркер на новое местоположение. Ошибка возникает при попытке использовать функцию карты внутри функции render (). Я разместил фотографию ошибки ниже.

import React, {Component} from 'react';
import {AppRegistry,Text,View,StyleSheet} from 'react-native'
import Component1 from`enter code here` './Component1'
import Component3 from './Component3'
import Component4 from './Component4'
import MapView from 'react-native-maps'

export default class myapp extends Component{
  constructor(props){
    super();
    this.state ={
      markers: [
        {
          watchId: 0,
          latitude:3,
          longitude:2
        },
        {
          watchId: 2,
          latitude:3,
          longitude:2
        }
      ]

    }
  }

  componentDidMount(){
    navigator.geolocation.watchPosition((position)=>{
      var lat = parseFloat(position.coords.latitude)
      var long = parseFloat(position.coords.longitude)
      var id = parseFloat(position.coords.watchId)
      var found = false
      this.setState({markers: this.state.markers.map(marker =>{
        if(marker.watchId === id){
          found = true
          marker.latitude = lat
          marker.longitude = long
        }
      })});
    if(found === false){
      this.setState({markers:[{watchId:id,latitude:lat,longitude:long}]});
    }
    },null,{timeout:0,distanceFilter:0})
}
  render(){
    return(
      <View>
      <MapView style={{height:350,width:350,marginTop:300,alignSelf:'center'}}
      initialRegion={{
        latitude: 37.33,
        longitude: -121.4024,
        latitudeDelta: 0.0922,
        longitudeDelta: 0.0421,
      }}
      showsUserLocation={true}
      followsUserLocation={true}
      showsMyLocationButton={true}
      >
      {this.state.markers.map(marker =>{
        return(
                <MapView.Marker
                coordinate={{latitude:marker.latitude,longitude:marker.longitude}}
                title={"title"}
                description={"description ey"}

             />
        );
      })}

      </MapView>
      </View>

    );
  }
}
AppRegistry.registerComponent('myapp',()=>myapp);

Answer 1

Вам необходимо вернуть маркер в componentDidMount.

Например:

 this.setState({markers: this.state.markers.map(marker =>{
    if(marker.watchId === id){
      found = true
      marker.latitude = lat
      marker.longitude = long
    }
    return marker
  })});