Doesn't show markers get from server

Question

Sorry for asking similar questions but not to change the original question is advised. So I make another question on slightly different problem. This time I cannot print markers on ComponentDidMount though everyting seems normal. No errors or warnings but markers cannot printed on the map.

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;

The JSON file returning

[{
    "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"
        }
    }
}]

Answer 1

I have made small changes after @needsleep 's corrections. Besides I have to change the lat and lng informations to float on serverside. The last state is below:

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) => response.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,
};

Answer 2

Your problem starts here:

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

Your response is an array and you need to set it in the correct state object like this

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

There is a second problem here and that is the data you get from the response. Each array item contains a "markers" object that is totally unnecessary and kind of complicates the data structure. You can solve this by processing the data you get from the API call before sending them to state like this:

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
}}))