从API获取的React原生标记不会显示在map上，const标记未定义

Question

我正在用React native制作我的第一个移动应用程序。我试图渲染从Api中获取经度和纬度的标记。为了测试这一点，我使用了一个在荷兰有随机地址的Api。我已经编写了代码来获取这个Api和映射通过键来渲染标记，只有他们不会显示在我的地图上。这是我为获取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.details);
console.log(results);
})
.catch(error => console.error(error));
}, []);
const markers = data.map((supermarket, index) => {
const lon = supermarket.lon
const lat = supermarket.lat
console.log(markers)
return (
<Marker key={index} coordinate={{ lat, lon}}/>
)
})
return (
<View>
{markers}
</View>
)
}
export default SupermarketList

就像我说的，标记不会显示在地图上。我放了一些控制台。查看问题出在哪里，因为我没有得到任何错误。Console.log(结果)工作并给我返回API数据，Console.log(超市)也是如此。不起作用的是console.log(标记)。这给了我"未定义"。我不知道为什么!

Answer 1

你需要从

<Marker key={index} coordinate={{ lat, lon}}/>

<Marker key={index} coordinate={{latitude: lat, longitude: lon}}/>

Answer 2

如果一切好的来自API,尝试通过协调道具,这个接口LatLng{纬度:数量;经度:数量;}