React native Undefined 不是函数（'...data.map...' 附近）

Question

我正在 React 中制作我的第一个移动应用程序，其中我有一个带有渲染标记的地图。 现在我希望标记数据来自我从 Api 获取的数据。 我想自己写，但为了做一个快速测试，我发现一个在荷兰有很多地址的。 我有两个文件：mapView 和 mapMarker。 在我的 mapMarker 文件中，我有以下代码来获取 api 数据并将其映射到标记键中：

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
    

在我的 mapView.js 中，我使用如下标记函数：

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

现在我的问题：当我尝试在我的手机上测试此代码时，我收到以下错误：渲染错误：未定义不是函数（靠近'..data.map...'）并且它指向 const.markers = data.map((...etc) 我试着用谷歌搜索这个错误，但有同样错误的人似乎有完全不同的代码。我不知道我做错了什么或者我应该如何解决这个问题。请帮忙！

Answer 1

您的响应返回一个对象而不是数组。 您想要的数组放在results.details中。 因此，在您的代码中，获取数据后，它变成了一个对象，并且 map 函数不适用于该类型的变量。

只是改变：

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

它应该工作。