如何在反应中渲染嵌套对象中的数据？

Question

我正在使用包含嵌套对象的 API，但我不确定如何显示它。我正在阅读有关使用 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>
      {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>

这里是数据源

"data": [
    {
        "id": 1,
        "name": "Bitcoin",
        "symbol": "BTC",
        "slug": "bitcoin",
        "num_market_pairs": 8203,
        "date_added": "2013-04-28T00:00:00.000Z",
        "tags": [
            "mineable"
        ],
        "max_supply": 21000000,
        "circulating_supply": 18376356,
        "total_supply": 18376356,
        "platform": null,
        "cmc_rank": 1,
        "last_updated": "2020-05-13T10:30:30.000Z",
        "quote": {
            "USD": {
                "price": 8920.68810523,
                "volume_24h": 40828691066.513,
                "percent_change_1h": 0.107841,
                "percent_change_24h": 1.62343,
                "percent_change_7d": -2.5838,
                "market_cap": 163929740386.67194,
                "last_updated": "2020-05-13T10:30:30.000Z"
            }
        }
    },

Answer 1

给你一个解决方案

<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.length &&
        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>{crypto.quote.USD.price}</td>
            <td>{crypto.quote.USD.price * crypto.quote.USD.percent_change_1h}</td>
            <td>{crypto.quote.USD.market_cap}</td>
          </tr>
        )
      )}
    </tbody>
  </Table>
</div>
Here is the data source

"data": [
    {
        "id": 1,
        "name": "Bitcoin",
        "symbol": "BTC",
        "slug": "bitcoin",
        "num_market_pairs": 8203,
        "date_added": "2013-04-28T00:00:00.000Z",
        "tags": [
            "mineable"
        ],
        "max_supply": 21000000,
        "circulating_supply": 18376356,
        "total_supply": 18376356,
        "platform": null,
        "cmc_rank": 1,
        "last_updated": "2020-05-13T10:30:30.000Z",
        "quote": {
            "USD": {
                "price": 8920.68810523,
                "volume_24h": 40828691066.513,
                "percent_change_1h": 0.107841,
                "percent_change_24h": 1.62343,
                "percent_change_7d": -2.5838,
                "market_cap": 163929740386.67194,
                "last_updated": "2020-05-13T10:30:30.000Z"
            }
        }
    },

我考虑过价格变动 percent_change_1h * price。在执行 map 操作之前检查 cryptos.length。

Answer 2

我不知道为什么你有 {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>

具有 Object.keys() 本质上 returns 一个数组，其中包含您从 cryptos 映射的数组的索引。 React 需要一个元素数组，因此您只需要遍历 cryptos 的元素，并将每个项目映射到 React 可以呈现的东西。

例如：

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>

如何在反应中渲染嵌套对象中的数据？

How can I render data within nested objects in react?

reactjs

nested-object