ReactJS - Невозможно получить доступ к свойствам объекта из выборки. - PullRequest
Новая
       7

ReactJS - Невозможно получить доступ к свойствам объекта из выборки.

0 голосов
/ 30 марта 2020

Я делаю выборку для API, и он нормально возвращает данные, но когда я пытаюсь получить доступ к свойствам, он возвращает:

Ошибка: объекты недопустимы как дочерний элемент React ( найдено: объект с ключами {породы, категории, id, URL, ширина, высота}). Если вы хотите отобразить коллекцию дочерних элементов, используйте вместо этого массив.

myFetch.jsx 

import React, {Component} from "react"

class myFetch extends Component {

    state={
        data:[]
    }

    componentDidMount(){
        const url = "xxxxxxxxxxxxxxxxxxxxxxx"
        fetch(url)
        .then(r=>r.json())
        .then(data=>{
            this.setState({data:data})

            // console.log(data)
    })
    .catch(e=>console.log(e))
    }



    render(){

        const {data} = this.state
        console.log(data[0])
        return (<p>{data[0]}</p>)
    }
}

export default myFetch

РЕДАКТИРОВАТЬ

«данные» в состоянии инициализируются в массив. Следовательно, во время рендеринга я должен был пройти через массив как {data.map (d => d.url)} и получить доступ к любому желаемому свойству, как показано ниже: 

render(){

    const {data} = this.state
    console.log(data)
    return (<p>{data.map(d=>d.url)}</p>)
}

1 Ответ

1 голос
/ 30 марта 2020

Ваши данные о состоянии не имеют элементов по индексу 0. Вот почему вы получаете эту неопределенную ошибку. Вы можете проверить, существует ли он, прежде чем пытаться его отобразить.

Что-то вроде этого: 

render() {
const { data } = this.state;
if (data[0]) {
  console.log(data[0]);
  return <p>{data[0].url}</p>;
}
return null;

}

...