索引 0 后每个对象数组的 TypeError

Question

使用 react 传单和水 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

错误

TypeError：无法读取未定义的属性“名称” 页 /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>

Answer 1

问题是您进行 API 调用，这个过程需要时间从服务器获取数据，所以第一次 obj2 是空的，所以当您调用 obj2[1].name 时会抛出错误

解决办法就是这样做

  <div> {obj2.length > 1 && obj2[2].name}</div>
 <div> {obj2.length > 1 && obj2[2].temp}</div>