React native Undefined is not a function (near '...data.map...')-CodePudding

I'm making my first mobile application in React, where I have a map with rendered markers. Now I want the marker data to come from data I fetched from an Api. I want to write my own but to do a quick test I found one that has a lot of adresses in the Netherlands. I have two files: mapView and mapMarker. In my mapMarker file I have the following code to fetch the api data and map it in a marker key:

import React, {useState, useEffect} from 'react';


import { Marker }from 'react-native-maps'
import { View } from 'react-native';

function SupermarketList() {
    const [data, setData] = useState([]);

    useEffect( () => {
    fetch('http://api.postcodedata.nl/v1/postcode/?postcode=1211EP&streetnumber=60&ref=domeinnaam.nl&type=json', {
        headers: {
            'Cache-Control': 'no-cache',
        },
    })
    .then(response => response.json())
    .then(results => {
        setData(results);
        console.log(results);
    })
    .catch(error => console.error(error));
}, []);

const markers = data.map((supermarket, index) => {
    const lon = supermarket.lon
    const lat = supermarket.lat
    return (
        <Marker key={index} coordinate={{ lat, lon}}/>
    )
})

return (
    <View>
        {markers}
    </View>
)
}

export default SupermarketList

In my mapView.js I use the marker function like this:

<MapView style={styles.map} 
       initialRegion={{
        latitude: 51.926517,
        longitude: 4.462456,
        latitudeDelta: 0.0922,
        longitudeDelta: 0.0421,
      }}
    >
        <Marker coordinate={pin}
        draggable={true}
        onDragStart={(e) =>{
          console.log("Drag start", e.nativeEvent.coordinates)
        }}
        onDragEnd={(e) =>{
          setPin({
            latitude: e.nativeEvent.coordinate.latitude,
            longitude: e.nativeEvent.coordinate.longitude

          })
        }}
        >
          <Callout>
            <Text>I'm here</Text>
          </Callout>
        </Marker>
        <SupermarketList>
  
        </SupermarketList>
        <Circle center = {pin}
          radius = {1000}></Circle>
      </MapView>

Now to my problem: When I try to Test this code on my phone I get the following error: Render Error: undefined is not a function (near'..data.map...') and it points to const.markers = data.map((...etc) I tried googling this error but people with the same error seem to have completely different code. I have no idea what I am doing wrong or how I should fix this. Please help!

CodePudding user response：

Your response returns an object instead of an array. The array which you want is placed within results.details. So in your code, after data is fetched it becomes an object and the map function won't work on that type of variable.

Just change:

    fetch('http://api.postcodedata.nl/v1/postcode/?postcode=1211EP&streetnumber=60&ref=domeinnaam.nl&type=json', {
    headers: {
        'Cache-Control': 'no-cache',
    },
})
.then(response => response.json())
.then(results => {
    //setData(results); original one
    setData(results.details); //changed one
    console.log(results);
})
.catch(error => console.error(error));

It should work.