访问嵌套对象 - ReactJs

Question

我正在尝试解析和映射嵌套对象，如下所示：

{
  "country": "germany",
  "timeline": {
    "cases": {
      "1/22/20": 0,
      "1/23/20": 0,
      "1/24/20": 0,
      "1/25/20": 0,
      "1/26/20": 0,
      "1/27/20": 1,
      "1/28/20": 4,
      "1/29/20": 4,
      "1/30/20": 4
    }
  }
}

这是我的第一次尝试，我尝试了几种在组件中插入响应的变体。

import React, { Component } from 'react'

class Chart extends Component {
  state = {
    historyStats: [],
    // error: true
  };

  componentDidMount() {
    fetch('https://corona.lmao.ninja/v2/historical/germany')
    .then(res => res.json())
    .then((data) => {
      this.setState({ historyStats: data })
    })
    .catch(console.log)
  }

  render() {
    const {historyStats} = this.state;
    console.log(Object.values(historyStats));

    return (
      <div>

       {Object.values(historyStats).map(test => (
        <p>{test[0]} | {test[1]}</p>
      ))}
      </div>
    )
  }
}


export default Chart;

我怎样才能实现这样的输出：

test[0]} = 1/22/20 - 日期

test[1] = 0 - 值

帮助表示赞赏 谢谢

Answer 1

好吧，问题是您没有正确访问您的项目，并且您将historyStats 定义为一个数组，但响应是一个对象，理想情况下，最好的做法是将数据转换为您想要的。让我们去做吧。

还可以使用Object Entries 来获取我们的[key, value]

import React, { Component } from 'react'

class Chart extends Component {
  state = {
    historyStats: [],
    // error: true
  };

  componentDidMount() {
    fetch('https://corona.lmao.ninja/v2/historical/germany')
    .then(res => res.json())
    .then((data) => {
      // basically, lets get what it is important, the CASES.
      const { timeline } = data;
      const { cases } = timeline;

      // now cases is an object, lets transform it into an array of 2 entries, the key and value.
      const newHistoryStats = Object.entries(cases).map(pair=> pair);
      this.setState({ historyStats: newHistoryStats })

    })
    .catch(console.log)
  }

  render() {
    const {historyStats} = this.state;
    console.log(Object.values(historyStats));

    return (
      <div>
        {
          historyStats.map(test => ( <p>{test[0]} | {test[1]}</p> ))
        }
      </div>
    )
  }
}


export default Chart;

基本上我们正在创建这样的条目：

fetch('https://corona.lmao.ninja/v2/historical/germany')
  .then(res => res.json())
  .then((data) => {
    // basically, lets get what it is important, the CASES.
    const { timeline } = data;
    const { cases } = timeline;

    // now cases is an object, lets transform it into an array of 2 entries, the key and value.
    const newHistoryStats = Object.entries(cases).map(pair => pair);
    
    // this will be similar to the render
    newHistoryStats.map(test => console.log(test[0], "|", test[1]))
  })