为什么我的 API 调用多次返回

Question

作为一个初学者项目，我正在制作一个简单的应用程序来跟踪国际空间站。我正在调用一个 API，在浏览器上我看到返回了多行，而不仅仅是我想要的那一行（纬度和经度）。

这是我正在使用的 API：

{
  message: "success",
  timestamp: 1612832513,
  iss_position: {
    longitude: "-112.2064",
    latitude: "35.1744"
  }
}

这是我认为问题所在的代码部分：

render() {
  var { items, isLoaded } = this.state;
  if (!isLoaded) {
    return <div>Loading...</div>; 
  } else {
    return (
      <div>
        <ul> 
          {Object.values(items).map(item => (
          <li key={item}> 
            <span >Latitude: {item.latitude} </span>
            <span >Longitude: {item.longitude} </span>
          </li>
          ))}
        </ul>
      </div> 
    )
  };
};

这是我在浏览器中看到的：

Latitude: Longitude:
Latitude: Longitude:
Latitude: -45.0969 Longitude: -32.9972

我认为问题出在.map()，但不知道该怎么做。任何帮助，将不胜感激。另外，如果我遗漏了任何我应该包含的信息，请告诉我，我会更新它。

Answer 1

当您使用Object.values(items).map(item => ...) 时，回调被调用：

• item = items.message
• item = items.timestamp
• item = items.iss_position

所以在您的 JSX 中，item.latitude 和 item.longitude 实际上正在尝试读取以下所有值：

• items.message.latitude, items.message.longitude
• items.timestamp.latitude, items.timestamp.longitude
• items.iss_position.latitude, items.iss_position.longitude

由于对象中只有一对坐标，只需像这样编写 JSX：

const { latitude, longitude } = items.iss_position;

return (
  <div>
    <span>Latitude: {latitude}</span>
    <span>Longitude: {longitude}</span>
  </div>
);

参考文献

• Object.values()
• Array.prototype.map()