如果是Object而不是数组，我如何返回response.data?地图不适用于我下面的代码

Question

我正试图通过使用axios获取的一些响应数据进行映射。API数据如下。。。。是的，我知道你不能通过物体绘制地图。我发现这不是一个数组，而是一个对象，这就是为什么map一定不能正常工作的原因？那么，我如何才能在return语句中显示我想要的对象数据呢？这就是我到目前为止所拥有的。。。。ps。我在stackoverflow上找到的所有youtube视频和文章似乎都不够具体，无法回答这个问题。youtube视频似乎只涵盖了通过数组中的response.data进行映射。

import React, { useEffect, useState } from "react";
import axios from "axios";
export default function App() {
const [info, setInfo] = useState([]);
useEffect(() => {
axios
.get("https://api.coindesk.com/v1/bpi/currentprice.json")
.then((response) => setInfo(response.data));
});
return (
<div>
{info.map((item) => (
<p>{item.description}</p>
))}
</div>
);
}```
JSON response 
```{time: Object, disclaimer: "This data was produced from the CoinDesk Bitcoin Price Index (USD). Non-USD currency data converted using hourly conversion rate from openexchangerates.org", chartName: "Bitcoin", bpi: Object}```

Answer 1

如果info是一个对象，则类似于：

const info = {
time: '2021-03-18T22:00:33.170Z',
disclaimer: 'This data was produced from the CoinDesk Bitcoin Price Index ...',
chartName: 'Bitcoin',
bpi: 'some bpi value',
}

然后可以使用Object.keys和map:

return (
<div>
{Object.keys(info).map((key) => (
<p key={key}>
{key}: {info[key]}
</p>
))}
</div>
)

因此，Object.keys(info)返回其键的数组：['time', 'disclaimer', 'chartName', 'bpi']，现在您可以在其上使用map，并使用动态属性语法读取值，如info[key]。

---

编辑：

如果info有一些嵌套对象，如：

const info = {
bpi: {
'2013-04-01': 1,
'2013-05-02': 2,
'2013-06-03': 3,
'2013-07-04': 4,
'2013-08-05': 5,
},
disclaimer: 'This data was produced from the CoinDesk Bitcoin Price Index ...',
time: {
updated: 'Sep 10, 2011 00:03:00 UTC',
updatedISO: '2011-09-10T00:03:00+00:00',
},
}

然后您可以在UI中将其渲染为：

<div>
<p>BPI:</p>
{Object.keys(info.bpi).map((key) => (
<p key={key}>
{key}: {info.bpi[key]}
</p>
))}
</div>
<p>Updated Time: {new Date(info.time.updatedISO).toLocaleDateString()}</p>
<p>Disclaimer: {info.disclaimer}</p>

Answer 2

好的，首先，感谢Ajeet Shah花时间帮助我解决这个问题。虽然我们早些时候犯了错误，但你引导我走上了正确的道路，这比给我答案更有帮助。话虽如此，这让我有机会了解Object.keys，以及它如何在显示Object的属性名数组中工作。这是代码的开头。。。稍后我会迭代更多的对象键，但现在我想向你展示我得到了它…

import React, { useEffect, useState } from "react";
import axios from "axios";
export default function App() {
const [info, setInfo] = useState(
{time: {}, chartname: {}} 
);
useEffect(() => {
axios
.get("https://api.coindesk.com/v1/bpi/currentprice.json")
.then((response) => setInfo(response.data));
}, []);
return (
<div>
<p>BPI:</p>
{Object.keys(info.time).map((key) => (
<p key={key}>
{key}: {info.time[key]}
</p>
))}
</div>
);
}```
no ERRORS!  Woo!