Console.log 返回具有相同键名的两个对象的 json 响应

Question

我有一个对象，其中包含两个具有相同键名（数据）的嵌套对象，第二个对象具有一个具有相同名称（数据）的嵌套对象。我正在尝试访问嵌套的第二个对象的数字和字母键。我的目标是选择第二个数据对象并“忽略”第一个数据对象，这样它就不会在我的 console.log 中显示为未定义。任何帮助将不胜感激。

index.js 获取 api 端点并返回响应。

const worldData = 'https://disease.sh/v3/covid-19/all';

export const fetchWorldData = async () => {
try {
     const response = await axios.get(worldData);

     return response;
   } catch (error) {
  console.log(error);
  } 
};

App.js 将数据设置为 state 对象并将其传递给 props

import { fetchWorldData } from './api';

 class App extends React.Component {
    state = {
     worldData: {},
    };

     async componentDidMount() {

         const fetchedWorldData = await fetchWorldData();

           this.setState({
            worldData: fetchedWorldData,
          });
      }

      render() {
       const { worldData } = this.state;

         return (
             <div>
                <WorldDisplay data={worldData} />
              </div>
                 );
                }
              }

   export default App;

带有道具的组件

import React from 'react';


const WorldDisplay = (data) => {
  console.log(data);
  return (
    <div>
      <h1> hello world</h1>
    </div>
  );
};

export default WorldDisplay;

这是console.log时出现的内容

{
{data: _proto_},
// I want to access nested data object below 
{data: data:{updated: 1594404341270, cases: 12507540, ...}
}

Answer 1

您实际上得到的是两个控制台日志。第一个是空白或空的，所以它在控制台上显示的是 _proto 或 portotype （从其基本形式继承的道具和方法；JS Object强> 在这种情况下）

第二个日志获取带有实际数据的响应。 它确实只有一个道具：data。它的结构是

{
  config: Object
  data: Object
  headers: Object
  request: XMLHttpRequest
  status: Number
  statusText: String
}

你想要的是这个里面的 data 属性（所以它是 data.data），它包含这个

{
  active: Number
  activePerOneMillion: Number
  affectedCountries: Number
  cases: Number
  casesPerOneMillion: Number
  critical: Number
  criticalPerOneMillion: Number
  deaths: Number
  deathsPerOneMillion: Number
  oneCasePerPeople: Number
  oneDeathPerPeople: Number
  oneTestPerPeople: Number
  population: Number
  recovered: Number
  recoveredPerOneMillion: Number
  tests: Number
  testsPerOneMillion: Number
  todayCases: Number
  todayDeaths: Number
  todayRecovered: Number
  updated: Number
}

要在您的代码中访问它，试试这个：

const WorldDisplay = (data) => {
  if(data.data && data.data.data)
      console.log(data.data.data);

  return (
    <div>
      <h1> hello world</h1>
    </div>
  );
};