如何解决索引 0 后每个对象数组的类型错误
使用反应传单和水 API。我根据从 API 获得的数据创建了一个对象数组,控制台日志显示我拥有所有正确的数据,特别是在第 109 行,它确实输出了正确的信息。然而,在第 254 和 255 行,使用 obj2[1]
只是给我'TypeError:无法读取未定义的属性'名称'。将这两行的索引切换回 0 使其编译并运行,但这显然不是正确的数据。这是怎么回事?
let obj2 =[{}];
if(water){
console.log(water);
for(let i = 0; i < 5; ++i){
obj2[i] ={
name: water.value.timeSeries[i].sourceInfo.siteName,site: water.value.timeSeries[i].sourceInfo.siteCode[0].value,lat: water.value.timeSeries[i].sourceInfo.geoLocation.geogLocation.latitude,long: water.value.timeSeries[i].sourceInfo.geoLocation.geogLocation.longitude,temp: water.value.timeSeries[i].values[0].value[0].value
};
}
console.log(obj2);
PRA = [obj2[0].lat,obj2[0].long]; //PUDDING RIVER AT AURORA
TRL = [obj2[1].lat,obj2[1].long]; //TUALITIN RIVER NEAR WEST LINN
CSC = [obj2[2].lat,obj2[2].long]; //CRYSTAL SPRINGS CREEK
WRP = [obj2[3].lat,obj2[3].long]; //WILLAMETTE RIVER AT PORTLAND
BCB = [obj2[4].lat,obj2[4].long]; //BEVERTON CREEK AT BEAVERTO
console.log(obj2[0].name)
console.log(obj2[1].name)
}
控制台显示
Page.js:108 PUDDING RIVER AT AURORA,OR
Page.js:109 TUALATIN RIVER AT OSWEGO DAM,NEAR WEST LINN,OR
错误
类型错误:无法读取未定义的属性“名称” 页 /src/Page.js:266
263 | radius={900}
264 | >
265 | <Popup>
> 266 | <div><b>{obj2[1].name}</b></div>
| ^ 267 | <div>Temp: {obj2[1].temp} C</div>
268 | </Popup>
269 | </Circle>
我正在处理的传单部分。将索引改回 0 即可修复。
<Marker position={TRL} icon={mapMarker}>
<Circle
color={'purple'}
center={TRL}
radius={900}
>
<Popup>
<div><b>{obj2[1].name}</b></div>
<div>Temp: {obj2[1].temp} C</div>
</Popup>
</Circle>
</Marker>
解决方法
问题是您进行 API 调用,此过程需要时间从服务器获取数据,因此第一次 obj2 为空,因此当您调用 obj2[1].name 时会抛出错误
解决方案是这样做
<div> {obj2.length > 1 && obj2[2].name}</div>
<div> {obj2.length > 1 && obj2[2].temp}</div>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。