javascript - 如何使用 Reactjs 将对象数据渲染到表中

Question

我从 API 得到了一个数据，它看起来像对象数据(JSON)Public API Link

import React, { Component } from 'react';
import axios from 'axios';
import './PostContainer.css';

class PostContainer extends Component {
  constructor(props) {
    super(props);
    this.state = { chartData: {} };
  }

  async componentDidMount() {
    let { data: chartData } = await axios.get(
      'https://api.bithumb.com/public/ticker/all'
    );
    this.setState({ chartData });
  }

  render() {
    const { chartData } = this.state;
    // chartData.data.date = undefined;
    // delete chartData.data.date;
    console.log(`DATA ${chartData.data}`);

    // for (const val, index in chartData.data) {
    //   console.log(`${index} : ${val.sell_price}`)
    // }

    return (
      <div className="Post">
        <table id="table" className="table table-striped table-bordered">
          <thead>
            <tr>
              <th>Coin Name</th>
              <th>Current Price</th>
              <th>Volume</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>{?? What should I enter?}</td>
              <td>123123123123</td>
              <td>12312312</td>
            </tr>
            <tr>
              <td>ETH</td>
              <td>121243123</td>
              <td>1231231</td>
            </tr>
          </tbody>
        </table>
      </div>
    );
  }
}

export default PostContainer;

我想像这样将所有数据呈现到表格中。

使用 console.log，它返回的对象是这样的

但我不知道如何迭代以使用这些对象数据来呈现数据。 在我使用 Express & NodeJS & Pug 环境之前，我使用 for...in 语句并且它运行良好。但是在 Reactjs 中使用这段代码

for (const val, index in chartData.data) {
      console.log(`${index} : ${val.sell_price}`)
    }

出现这样的错误

  Line 24:  Parsing error: Unexpected token

我尝试了很多其他的迭代方法，但似乎都不对。

Answer 1

如果你打算迭代值 Object.entries() 也可以跳过关键部分。

for (const [key, value] of Object.entries(chartData.data)) {
  console.log(`${value.sell_price}`)
}

// Or, via forEach

Object.entries(chartData.data).forEach(([key, value]) => {
  console.log(`${value.sell_price}`) 
});