Доступ к массиву, который имеет объект в качестве значения - PullRequest
Новая
       37

Доступ к массиву, который имеет объект в качестве значения

0 голосов
/ 16 апреля 2020

Я использую pokeapi, чтобы реагировать. Я хочу отобразить значения в свойстве types, но не могу этого сделать. Я получаю не могу прочитать свойство со значением 0 undefined. Я пробовал несколько методов, таких как сохранение объекта типов в переменной, затем циклический переход по элементам, но я получаю ту же ошибку.

Мой код приведен ниже: Приложение. js


state = {
        pokemonData: []
    }

    componentDidMount() {
        fetch(`https://pokeapi.co/api/v2/pokemon/mewtwo`)
            .then(response => response.json())
            .then(data => {
                //console.log(data);
                this.setState({pokemonData: data});
            })
            .catch(error => console.log(`Error fetching and parsing data ${error}`));
    }

render() {
        return (
            <>


              <Display data={this.state.pokemonData}/>


            </>
        );
    }

Дисплей. js

import React from 'react';

const Display = (props) => {


    return (
        <>
            <h1 className="pokemon-name">{props.data.name}</h1>
            <p>{props.data.id}</p>
           <p>{props.data.types[0].type.name}</p>

        </>
    );
}

export default Display;

1 Ответ

0 голосов
/ 16 апреля 2020

Прежде всего вы инициализируете свое состояние пустым массивом, но данные, возвращаемые вашим API, на самом деле являются объектом. Во-вторых, вы пытаетесь визуализировать некоторые данные, предоставляя пустой массив в качестве реквизита (фактические данные появятся позже). Таким образом, props.data.types не существует, и props.data.types [0] вернет ошибку.

Инициализация с пустым объектом 

state = {
    pokemonData: {}
}

Затем в вашей функции рендеринга, перед рендерингом убедитесь, что у вас есть что-то в pokemonData: 

return (
  <>
    {this.state.pokemonData.name !== undefined &&
      <Display data={this.state.pokemonData}/>
    }
  </>
);
...