Console.log возвращает json ответ с двумя объектами с одинаковым именем ключа - PullRequest
Новая
       39

Console.log возвращает json ответ с двумя объектами с одинаковым именем ключа

0 голосов
/ 10 июля 2020

У меня есть объект с двумя вложенными объектами с одинаковыми именами ключей (данными), у второго объекта есть вложенный объект с тем же именем (данные). Я пытаюсь получить доступ к цифровым и буквенным клавишам вложенного второго объекта. Моя цель - выбрать второй объект данных и «игнорировать» первый, чтобы он не отображался в моем 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 установить данные для объекта состояния и передать их реквизитам 

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;

Компонент с props 

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, ...}
}

1 Ответ

2 голосов
/ 11 июля 2020

На самом деле вы получаете два журнала консоли. Первый пуст или пуст, поэтому на консоли отображается это _proto или portotype (свойства и методы, унаследованные от его основной c формы; JS Объект в данном случае)

Второй журнал получает ответ с фактическими данными. У него есть только одна опора: данные . Его структура: 

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

То, что вам нужно, это data prop внутри (так что это 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>
  );
};
...