Не отображает маркеры с сервера

Engin Y. спросил: 28 марта 2018 в 02:31 в: react-native

Извините за задание похожих вопросов, но не для изменения исходного вопроса. Поэтому я задаю другой вопрос о немного другой проблеме. На этот раз я не могу печатать маркеры на ComponentDidMount, хотя все выглядит нормально. Нет ошибок или предупреждений, но маркеры не могут быть напечатаны на карте.

import React, { Component } from 'react'
import { Text, View, StyleSheet, Switch, Alert,TouchableOpacity, AppRegistry} from 'react-native'import MapView, {Marker, ProviderPropType} from 'react-native-maps';
import axios from 'axios';const styles = StyleSheet.create({
  container: {
    ...StyleSheet.absoluteFillObject,
    height: 400,
    width: 400,
    justifyContent: 'flex-end',
    alignItems: 'center',
  },
  map: {
    ...StyleSheet.absoluteFillObject,
  },
});
class Fetchdata extends Component {
  constructor (props) {
    super(props);
  };
  state = {
    latitude: 40.35,
    longitude: 27.95,
    markers: []
  };
  componentDidMount = () => {
    navigator.geolocation.getCurrentPosition(
        (position) => {
          this.setState({
            latitude: position.coords.latitude,
            longitude: position.coords.longitude,
            error: null,
      });
    },
      (error) => this.setState({ error: error.message }),
      { enableHighAccuracy: true, timeout: 20000, maximumAge: 1000 },
    );    axios.get('http://isg.info.tr/query_maps.php' + '?latitude=' + this.latitude + '&longitude=' + this.longitude)
    .then(response => this.setState(response))
   }
   render() {
      return (
        <View style={styles.container}>
          <MapView
                style={styles.map}
                initialRegion={{
                latitude: this.state.latitude,
                longitude: this.state.longitude,
                latitudeDelta: 0.015,
                longitudeDelta: 0.015,
            }}
            >
            {this.state.markers.map((marker, index) => (
              <MapView.Marker key={marker.index} coordinate={marker.latlng} title={'marker.title'} />
            ))}
          </MapView>
      </View>
      );
   }
}
Fetchdata.propTypes = {
  provider: ProviderPropType,
};
export default Fetchdata;

Файл JSON, возвращающий

[{
    "markers": {
        "index": "1",
        "latlng": {
            "latitude": "40.3565",
            "longitude": "27.9774"
        }
    }
}, {
    "markers": {
        "index": "3",
        "latlng": {
            "latitude": "40.3471",
            "longitude": "27.9598"
        }
    }
}, {
    "markers": {
        "index": "2",
        "latlng": {
            "latitude": "40",
            "longitude": "27.9708"
        }
    }
}]

2 ответа

Есть решение
needsleep ответил: 29 марта 2018 в 07:59

Ваша проблема начинается здесь:

axios.get('http://isg.info.tr/query_maps.php' + '?latitude=' + this.latitude + '&longitude=' + this.longitude)
.then(response => this.setState(response))

Ваш ответ является массивом, и вам нужно установить его в правильном объекте состояния, как этот

axios.get('http://isg.info.tr/query_maps.php' + '?latitude=' + this.latitude + '&longitude=' + this.longitude)
.then(response => this.setState({markers: response}))

Здесь есть вторая проблема - это данные, которые вы получаете из ответа. Каждый элемент массива содержит объект "маркеры", который совершенно не нужен и как бы усложняет структуру данных. Вы можете решить эту проблему, обработав данные, полученные из вызова API, перед отправкой их в такое состояние:

axios.get('http://isg.info.tr/query_maps.php' + '?latitude=' + this.latitude + '&longitude=' + this.longitude)
.then(response => this.setState({markers: response.map(marker)=> {
    return marker.markers
}}))
Engin Y. ответил: 29 марта 2018 в 02:42
Большое вам спасибо, что вы спасли меня после 3-4 дней головной боли.
Engin Y. ответил: 29 марта 2018 в 02:41

Я внес небольшие изменения после исправлений @needsleep. Кроме того, я должен изменить информацию lat и lng так, чтобы она плавала на стороне сервера. Последнее состояние ниже:

import React, { Component } from 'react'
import { Text, View, StyleSheet, Switch, Alert, AppRegistry} from 'react-native'
import MapView, {Marker, ProviderPropType} from 'react-native-maps';
import update from 'immutability-helper';const styles = StyleSheet.create({
  container: {
    ...StyleSheet.absoluteFillObject,
    height: 400,
    width: 400,
    justifyContent: 'flex-end',
    alignItems: 'center',
  },
  map: {
    ...StyleSheet.absoluteFillObject,
  },
});
export default class Fetchdata extends Component {
  constructor (props) {
    super(props);
  };
  state = {
    latitude: 40.3565,
    longitude: 27.9774,
    markers: []
  };
  componentDidMount = () => {
    navigator.geolocation.getCurrentPosition(
        (position) => {
          this.setState({
            latitude: position.coords.latitude,
            longitude: position.coords.longitude,
            error: null,
      });
    },
      (error) => this.setState({ error: error.message }),
      { enableHighAccuracy: true, timeout: 20000, maximumAge: 1000 },
    );
   }
   onRegionChange (region) {
    return fetch('http://isg.info.tr/query_maps.php' + '?latitude=' + region.latitude + '&longitude=' + region.longitude)
    .then((response) => react.json())
    .then((responseJson) => {      this.setState({markers: responseJson });    })
    .catch((error) =>{
      console.error('hata'+ error);
    });  }
   render() {
      return (
        <View style={styles.container}>
          <MapView
                style={styles.map}
                initialRegion={{
                latitude: this.state.latitude,
                longitude: this.state.longitude,
                latitudeDelta: 0.015,
                longitudeDelta: 0.015,
            }}
            onRegionChange={this.onRegionChange.bind(this)}
            >
            {this.state.markers.map((marker, index) => (
              <MapView.Marker key={marker.index} coordinate={marker.latlng} title={'marker.title'} />
            ))}          </MapView>
      </View>
      );
   }
}
Fetchdata.propTypes = {
  provider: ProviderPropType,
};