Reactjs 如何在react中呈现嵌套对象中的数据？

我正在使用一个包含嵌套对象的API，我不知道如何显示它。我正在阅读有关使用Object.keys的内容，但不确定如何使用。。。请帮忙

这是react代码。我需要动态地呈现价格

<div>
  <Table responsive striped bordered hover variant="dark">
    <thead>
      <tr>
        <th>Rank</th>
        <th>Name</th>
        <th>Symbol</th>
        <th>Price</th>
        <th>% Change</th>
        <th>Market Cap</th>
      </tr>
    </thead>
    <tbody>
      {Object.keys(
        cryptos.map(crypto => (
          <tr key={crypto.id}>
            <td>{crypto.cmc_rank}</td>
            <td>
              <Link to={`/crypto/${crypto.id}`}>{crypto.name}</Link>
            </td>
            <td>{crypto.symbol}</td>
            <td>{`price should be displayed here `}</td>
            <td>{`price change should be displayed here `}</td>
            <td>{`market cap should be displayed here `}</td>
          </tr>
        ))
      )}
    </tbody>
  </Table>
</div>

---

给你一个解决方案

等级
名称
象征
价格
%改变
市值
{ 
加密长度&&
cryptos.map（crypto=>(
{crypto.cmc_rank}
{crypto.name}
{加密符号}
{crypto.quote.USD.price}
{crypto.quote.USD.price*crypto.quote.USD.percent_1h}
{crypto.quote.USD.market_cap}
)
)}
这是数据源
“数据”：[
{
“id”：1，
“名称”：“比特币”，
“符号”：“BTC”，
“slug”：“比特币”，
“数量市场对”：8203，
“添加日期”：“2013-04-28:00:00.000Z”，
“标签”：[
“可开采”
],
“最大供应量”：21000000，
“循环供应”：18376356，
“总供应量”：18376356，
“平台”：空，
“军委军衔”：1，
“最近更新”：“2020-05-13T10:30:30.000Z”，
“引述”：{
“美元”：{
“价格”：8920.68810523，
“卷_24小时”：40828691066.513，
“变化百分比”：0.107841，
“24小时变化百分比”：1.62343，
“变化百分比7d”：-2.5838，
“市值”：163929740386.67194，
“最近更新”：“2020-05-13T10:30:30.000Z”
}
}
}，

我不知道您为什么在那里有

{Object.keys（

），请删除它

<div>
  <Table responsive striped bordered hover variant="dark">
    <thead>
      <tr>
        <th>Rank</th>
        <th>Name</th>
        <th>Symbol</th>
        <th>Price</th>
        <th>% Change</th>
        <th>Market Cap</th>
      </tr>
    </thead>
    <tbody>
      { cryptos.map(crypto => (
        <tr key={crypto.id}>
          <td>{crypto.cmc_rank}</td>
          <td>
            <Link to={`/crypto/${crypto.id}`}>{crypto.name}</Link>
          </td>
          <td>{crypto.symbol}</td>
          <td>{`price should be displayed here `}</td>
          <td>{`price change should be displayed here `}</td>
          <td>{`market cap should be displayed here `}</td>
        </tr>
      )) }
    </tbody>
  </Table>
</div>

将呈现

<div>
  <div>Hello</div>
  <div>World</div>
</div>

你好
世界

感谢您的回复。在我将问题发布到此处之前，我尝试了上述解决方案，但无效…表。jsx:28未捕获类型错误：无法读取的属性“USD”undefined@Blondish您可以检查您的加密JSON。错误是因为它没有quote作为键“quote”：{“USD”：{“price”：8920.68810523，这确实有效..我必须删除把事情弄得一团糟的虚拟数据：）谢谢你的回答。我删除了Object.keys（）。你上面提到的示例如何应用到我的案例中？你能给我介绍一下吗？

const dataList = [{ key:'a', value:'Hello' }, { key:'b', value:'World' }];

<div>
  { dataList.map(data => <div key={ data.key }>{ data.value }</div>) }
</div>

<div>
  <div>Hello</div>
  <div>World</div>
</div>