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

它應該工作。