React Fetch, возвращающий объект __proto__ при передаче в качестве свойства - PullRequest
Новая
       101

React Fetch, возвращающий объект __proto__ при передаче в качестве свойства

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

Когда я передаю полученные данные в props, он возвращает дополнительный объект proto в моем компоненте. Когда я регистрирую данные в componentDidMount (), прежде чем передать их реквизитам, он возвращает правильный формат одного объекта, который я использую sh. Однако когда я передаю его как реквизит, он возвращает два объекта. Один с proto , а другой - правильно отформатированный объект.

Как передать формат отдельного объекта в свойства?

конечная точка Api 

export const fetchWorldData = async () => {
  try {
    const response = await axios.get(worldData);
    return response;
  } catch (error) {
    console.log(error);
  }
};

Приложение. js - установить данные выборки для объекта состояния и передать их реквизитам

Примечание: console.log в обратном вызове 

import React from 'react';
import { WorldDisplay } from './components';
import { fetchWorldData } from './api';


class App extends React.Component {
  state = {

    worldData: {},

  };


  async componentDidMount() {

    const fetchedWorldData = await fetchWorldData();

    this.setState(

      {

        worldData: fetchedWorldData,

      }, () => { 

      //Callback returns correctly formatted data

      console.log(fetchedWorldData);

      }
    );
  }

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

    return (
      <div>
   // pass data as props to WorldDisplay component
        <WorldDisplay data={worldData} />

      </div>
    );
  }
}

export default App;

Console.log правильного одиночного объекта формат enter image description here

Component with fetched data props

import React from 'react';

const WorldDisplay = (data) => {
// console.log returns two objects, one __proto__ one correctly formatted
  console.log(data);

  return (
    
      Hello Wold
    
  );
};

export default WorldDisplay;

console.log of undesired two objects

введите описание изображения здесь

Пока я пытался выполнить console.log (data.data.data) и деструктурировать в компоненте WorldDisplay, он возвращает значение undefined для первого объекта proto , и я не могу перейти ко второму правильному объекту, поскольку он ссылается на два объекта с разными телами ответа. Я намерен вернуть только второй правильный формат, чтобы я мог правильно перемещаться по нему.

1 Ответ

1 голос
/ 14 июля 2020

Хорошо, метод рендеринга компонента React вызывается каждый раз при изменении состояния. Итак, что происходит за сценой, так это то, что свойство состояния worldData изначально является пустым объектом, а компонент WorldDisplay визуализируется с пустым объектом как worldData prop. fetchWorldData является асинхронным c fn, поэтому, когда он возвращает результат, он обновляет свойство состояния worldData; это снова запускает метод render. Если вы хотите избежать рендеринга дочернего компонента, если объект worldData имеет значение null или undefined, вы можете визуализировать его условно, используя тернарный оператор 

{worldData? <WorldDisplay data={worldData} /> : <></>}

А также вы должны сделать начальное значение переменной состояния worldData as null

Кстати, вам не нужно делать componentDidMount async; потому что функция fetchWorlddata является асинхронным методом c. Вы можете переписать его как 

  componentDidMount() {

    const worldData = fetchWorldData();

    this.setState(

      {

        worldData //Feature of ES6, this is equivalent to worldData : worldData 

      }, () => { 

      //Callback returns correctly formatted data

      console.log(fetchedWorldData);

      }
    );
  }
...