我无法弄清楚如何将这个嵌套对象处理到React中的表中。任何帮助将不胜感激

Question

我希望将日期和属于该日期的汇率放入表格中。原始数据集是相同的，只是其中包含利率的日期更多，所以我不能只使用点符号来访问它。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
        <link href='//cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/magnific-popup.css' rel='stylesheet' />
        <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

<div class="container mt-5">


  <!--Section: Content-->
  <section class="dark-grey-text text-center">

    <style>
      .md-pills .nav-link.active {
        background-color: #3f51b5;
      }
    </style>
    
    <!-- Section heading -->
    <h3 class="font-weight-bold mb-4 pb-2">Our best projects</h3>
    <!-- Section description -->
    <p class="text-muted w-responsive mx-auto mb-5">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum quas, eos officia maiores ipsam ipsum dolores reiciendis ad voluptas, animi obcaecati adipisci sapiente mollitia. </p>
    
      <!--First row-->
      <div class="row">
        
        <!--First column-->
        <div class="col-12">
          
          <!-- Nav tabs -->
          <ul class="nav md-pills flex-center flex-wrap mx-0" role="tablist">
            <li class="nav-item">
              <a class="nav-link active font-weight-bold" data-toggle="tab" href="#panel31" role="tab">ALL</a>
            </li>
            <li class="nav-item">
              <a class="nav-link font-weight-bold" data-toggle="tab" href="#panel32" role="tab">BRANDING</a>
            </li>
            <li class="nav-item">
              <a class="nav-link font-weight-bold" data-toggle="tab" href="#panel33" role="tab">PACKAGING</a>
            </li>
            <li class="nav-item">
              <a class="nav-link font-weight-bold" data-toggle="tab" href="#panel34" role="tab">PRINT DESIGN</a>
            </li>
          </ul>
          
        </div>
        <!--First column-->

    </div>
    <!--First row-->
    
    <!--Tab panels-->
    <div class="tab-content">

      <!--Panel 1-->
      <div class="tab-pane fade show in active" id="panel31" role="tabpanel">

        <!--First row-->
        <div class="row">
          
          <!--First column-->
          <div class="col-lg-4 col-md-12 mb-4">
            <!--Featured image-->
            <div class="view overlay zoom z-depth-2">
              <img src="https://mdbootstrap.com/img/Photos/Others/project1.jpg" class="img-fluid">
            </div>
            <p class="text-uppercase text-center font-weight-bold text-muted my-4">Lorem ipsum dolor sit
              amet</p>
          </div>
          <!--First column-->
          
          <!--Second column-->
          <div class="col-lg-4 col-md-6 mb-4">
            <!--Featured image-->
            <div class="view overlay zoom z-depth-2">
              <img src="https://mdbootstrap.com/img/Photos/Others/project8.jpg" class="img-fluid">
            </div>
            <p class="text-uppercase text-center font-weight-bold text-muted my-4">Lorem ipsum dolor sit
              amet</p>
          </div>
          <!--Second column-->
          
          <!--Third column-->
          <div class="col-lg-4 col-md-6 mb-4">
            <!--Featured image-->
            <div class="view overlay zoom z-depth-2">
              <img src="https://mdbootstrap.com/img/Photos/Others/project4.jpg" class="img-fluid">
            </div>
            <p class="text-uppercase text-center font-weight-bold text-muted my-4">Lorem ipsum dolor sit
              amet</p>
          </div>
          <!--Third column-->
          
        </div>
        <!--First row-->

      </div>
      <!--Panel 1-->

      <!--Panel 2-->
      <div class="tab-pane fade" id="panel32" role="tabpanel">

        <!--First row-->
        <div class="row">
          
          <!--First column-->
          <div class="col-lg-4 col-md-12 mb-4">
            <!--Featured image-->
            <div class="view overlay zoom z-depth-2">
              <img src="https://mdbootstrap.com/img/Photos/Others/project4.jpg" class="img-fluid">
            </div>
            <p class="text-uppercase text-center font-weight-bold text-muted my-4">Lorem ipsum dolor sit
              amet</p>
          </div>
          <!--First column-->
          
          <!--Second column-->
          <div class="col-lg-4 col-md-6 mb-4">
            <!--Featured image-->
            <div class="view overlay zoom z-depth-2">
              <img src="https://mdbootstrap.com/img/Photos/Others/project5.jpg" class="img-fluid">
            </div>
            <p class="text-uppercase text-center font-weight-bold text-muted my-4">Lorem ipsum dolor sit
              amet</p>
          </div>
          <!--Second column-->
          
          <!--Third column-->
          <div class="col-lg-4 col-md-6 mb-4">
            <!--Featured image-->
            <div class="view overlay zoom z-depth-2">
              <img src="https://mdbootstrap.com/img/Photos/Others/project1.jpg" class="img-fluid">
            </div>
            <p class="text-uppercase text-center font-weight-bold text-muted my-4">Lorem ipsum dolor sit
              amet</p>
          </div>
          <!--Third column-->
          
        </div>
        <!--First row-->

      </div>
      <!--Panel 2-->

      <!--Panel 3-->
      <div class="tab-pane fade" id="panel33" role="tabpanel">

        <!--First row-->
        <div class="row">
          
          <!--First column-->
          <div class="col-lg-4 col-md-12 mb-4">
            <!--Featured image-->
            <div class="view overlay zoom z-depth-2">
              <img src="https://mdbootstrap.com/img/Photos/Others/project3.jpg" class="img-fluid">
            </div>
            <p class="text-uppercase text-center font-weight-bold text-muted my-4">Lorem ipsum dolor sit
              amet</p>
          </div>
          <!--First column-->
          
          <!--Second column-->
          <div class="col-lg-4 col-md-6">
            <!--Featured image-->
            <div class="view overlay zoom z-depth-2">
              <img src="https://mdbootstrap.com/img/Photos/Others/project6.jpg" class="img-fluid">
            </div>
            <p class="text-uppercase text-center font-weight-bold text-muted my-4">Lorem ipsum dolor sit
              amet</p>
          </div>
          <!--Second column-->
          
          <!--Third column-->
          <div class="col-lg-4 col-md-6 mb-4">
            <!--Featured image-->
            <div class="view overlay zoom z-depth-2">
              <img src="https://mdbootstrap.com/img/Photos/Others/project8.jpg" class="img-fluid">
            </div>
            <p class="text-uppercase text-center font-weight-bold text-muted my-4">Lorem ipsum dolor sit
              amet</p>
          </div>
          <!--Third column-->

        </div>
        <!--First row-->

      </div>
      <!--Panel 3-->

      <!--Panel 4-->
      <div class="tab-pane fade" id="panel34" role="tabpanel">

        <!--First row-->
        <div class="row">
          
          <!--First column-->
          <div class="col-lg-4 col-md-12 mb-4">
            <!--Featured image-->
            <div class="view overlay zoom z-depth-2">
              <img src="https://mdbootstrap.com/img/Photos/Others/project1.jpg" class="img-fluid">
            </div>
            <p class="text-uppercase text-center font-weight-bold text-muted my-4">Lorem ipsum dolor sit
              amet</p>
          </div>
          <!--First column-->
          
          <!--Second column-->
          <div class="col-lg-4 col-md-6 mb-4">
            <!--Featured image-->
            <div class="view overlay zoom z-depth-2">
              <img src="https://mdbootstrap.com/img/Photos/Others/project7.jpg" class="img-fluid">
            </div>
            <p class="text-uppercase text-center font-weight-bold text-muted my-4">Lorem ipsum dolor sit
              amet</p>
          </div>
          <!--Second column-->
          
          <!--Third column-->
          <div class="col-lg-4 col-md-6 mb-4">
            <!--Featured image-->
            <div class="view overlay zoom z-depth-2">
              <img src="https://mdbootstrap.com/img/Photos/Others/project8.jpg" class="img-fluid">
            </div>
            <p class="text-uppercase text-center font-weight-bold text-muted my-4">Lorem ipsum dolor sit
              amet</p>
          </div>
          <!--Third column-->
          
        </div>
        <!--First row-->

      </div>
      <!--Panel 4-->

    </div>
    <!--Tab panels-->

    </section>
  
  
</div>

Answer 1

我这样做是为了解决问题

这有点不同，但是具有相似的逻辑和映射功能

import React from 'react';

function App() {

  const json = [
    {
      _id: '5f746f892103e3371429dcd0',
      date: '2020-05-05T00:00:00.000Z',
      rates: {
        CAD: 1.5201,
        HKD: 8.4057,
        ISK: 159.3,
        PHP: 54.863,
        DKK: 7.4612,
        HUF: 350.27,
        CZK: 26.978,
        AUD: 1.6825,

      },
      __v: 0,
    },
    {
      _id: '5f746f892103e3371429dd6f',
      date: '2020-05-04T00:00:00.000Z',
      rates: {
        CAD: 1.539,
        HKD: 8.4838,
        ISK: 159.5,
        PHP: 55.379,
        DKK: 7.4622,
        HUF: 353.27,
        CZK: 27.119,
      },
      __v: 0,
    },
  ];

  return (
    <div className="App">
      {json.map(obj => (
        <div key={obj._id} >
          {/* {console.log(Object.keys(obj.rates))} */}
          {console.log(`Rates for object ${obj._id}`)}
          {obj.date} -
          {Object.keys(obj.rates).map(rate => (
            <div key={rate} >
              {console.log(`Rate is ${rate} and value is ${obj.rates[rate]}`)}
              {rate} : {obj.rates[rate]},
            </div>
          ))}
          {console.log("\n")}
          <br />
        </div>
      ))}
    </div>
  );
}

export default App;

这是确切的答案（我认为）

import React from 'react';

function App() {

  const json = [
    {
      _id: '5f746f892103e3371429dcd0',
      date: '2020-05-05T00:00:00.000Z',
      rates: {
        CAD: 1.5201,
        HKD: 8.4057,
        ISK: 159.3,
        PHP: 54.863,
        DKK: 7.4612,
        HUF: 350.27,
        CZK: 26.978,
        AUD: 1.6825,

      },
      __v: 0,
    },
    {
      _id: '5f746f892103e3371429dd6f',
      date: '2020-05-04T00:00:00.000Z',
      rates: {
        CAD: 1.539,
        HKD: 8.4838,
        ISK: 159.5,
        PHP: 55.379,
        DKK: 7.4622,
        HUF: 353.27,
        CZK: 27.119,
      },
      __v: 0,
    },
  ];

  let allRates = []

  json.map(obj => {
    Object.keys(obj.rates).map(rate => {
      allRates.push(rate)
    })
  })

  allRates = [...new Set(allRates)]
  console.log(allRates)

  return (
    <div className="App">
      <table>
        <tr>
          <th>
            Date
          </th>
          {allRates.map(rate => (
            <th>
              {rate}
            </th>
          ))}
        </tr>
        {json.map(obj => (
          <tr>
            <td>{obj.date}</td>
            {allRates.map(rate => (
              <td>{obj.rates[rate]}</td>
            ))}
          </tr>
        ))}
      </table>
    </div>
  );
}

export default App;

Id也想说，我认为这是您所期望的答案。我不确定是否未回答问题评论或答复。

此外，您还告诉过要将其放在表格中

我做了最基本的桌子方式

如果您想要其他东西，请回复或评论

Check this out (Its useful)

我尽力了

希望它能回答您的问题