reactjs - 从网站 API 获取数据的正确格式
问题描述
我正在尝试从网站 API 获取数据到我的反应/传单应用程序中。到目前为止,我在控制台中返回了数据:
fetch('https://thesession.org/members/nearby?latlon=53,-6&radius=1000&format=json&perpage=50')
.then(res => res.json())
.then(members => {
console.log(members);
this.setState({
Nearbymems : members.Nearbymems
});
});
然后我尝试使用以下方法在我的地图上将成员显示为标记:
{this.state.NearbyMems.map(members => (
<Marker
position={[members.location.latitude, members.location.longitude]}
icon={myIcon3} >
<Popup>
<em>{members.name}, </em>
{members.bio} {'\n'}
<PopupModal initialModalState={true}/>
</Popup>
</Marker>
))}
虽然这不会产生任何错误并且我的应用程序正在编译和运行而没有错误,但没有显示任何标记。这是返回的 JSON 数据的显示示例:
{
"latlon": "53,-6",
"radius": "1000",
"format": "json",
"perpage": "50",
"pages": 108,
"page": 1,
"total": 5391,
"members": [
{
"id": 85639,
"name": "____",
"url": "https://thesession.org/members/85639",
"location": {
"latitude": "____",
"longitude": "_____"
},
"date": "",
"bio": ""
},
编辑:
myIcon3 的代码:
var myIcon3 = L.icon({
iconUrl: 'http://www.libpng.org/pub/png/img_png/pengbrew_160x160.png',
iconSize: [25, 51],
iconAnchor: [12.5, 51],
popupAnchor: [0, -51],
});
获取的输出:
Object
format: "json"
latlon: "53,-6"
members: (50) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…},
{…}, {…}, {…},{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}
{…}, {…},{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…},
{…}, {…},{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]
page: 1
pages: 108
perpage: "50"
radius: "1000"
total : 5391
__proto__: Object
解决方案
解决我自己的问题。我正在使用一个名为IPAPI的 IP 查找器,它要求我将其 lat/lng 格式化为:
lng: location.longitude
lat: location.latitude
如果用户拒绝谷歌内置的位置请求,此功能将捕获用户 IP。我已经删除了这个功能,我的 fetch 语句现在返回了正确的数据。
推荐阅读
- php - 如何从Windows将图像保存到Linux上的文件夹中
- c - 数组末尾显示随机字符
- visual-studio - 如何为 Visual Studio 创建一个可以直接与 TFS 交互的扩展?
- listview - 使用 Intent Android 发送整数
- android - recyclerView whit 多视图类型在滚动时搞砸了
- excel - 日期格式 Excel
- java - Grails - Spock - 任务':test'的执行失败 - Gradle
- c++ - 递归调用可变参数函数的链接器错误
- javascript - 如何引用 Svelte 组件的父组件?
- mysql - sql查询行之间的差异