React .map возвращает неопределенное с Fetch API - PullRequest
Новая
       17

React .map возвращает неопределенное с Fetch API

0 голосов
/ 14 марта 2019

Я хочу, чтобы мой метод React render возвращал объекты из API аналогично тому, что я получаю от Postman.Например: 

{
  "meta": {
    "count": 807,
    "countReturned": 10,
    "requestTime": 1552524395,
    "responseTime": 1552524395,
    "responseMs": 7
  },
  "data": [
     {
        "type": "breeds",
        "id": "1",
        "attributes": {
            "name": "Abyssinian"
        },
        "relationships": {
            "species": {
                "data": [
                    {
                        "type": "species",
                        "id": "3"
                    }
                ]
            }
        },
        "meta": []
    },

Но у меня возникают проблемы с использованием .map для создания нужного объекта.Вот мой код: 

class Results extends Component {
constructor() {
    super();
    this.state = {
        animals: [],
    };
}

componentDidMount() {
    var url = "https://test1-api.rescuegroups.org/v5/public/animals/breeds?fields[breeds]=name&fields[species]=singular,plural,youngSingular,youngPlural&include=species&options=meta&limit=10";
    const API_KEY = process.env.REACT_APP_API_KEY;

    fetch(url, {
        method: 'GET',
        headers: {
            Authorization: API_KEY,
            'Content-Type': 'application/json'}
    })
    .then(response => response.json())
    .then(data => this.setState({animals: data.results }))
}

render() {
    return (

        <div>
            {this.state.animals.map(animal => <div>{animal.results}</div>)}
        </div>

    )
}
}

export default Results;

Любые советы приветствуются!

Ответы [ 3 ]

1 голос
/ 14 марта 2019

Параметр метода обратного вызова с именем «data» не означает, что это свойство data данных ответа.

Я думаю, что обратный вызов должен быть 

...
.then(response => response.json())
.then(response => this.setState({animals: response.data}))

<div>
  {this.state.animals.map(animal => <div>{animal.type}</div>)}
</div>
1 голос
/ 14 марта 2019

Я думаю, это сбивает вас с толку из-за немного запутанного соглашения об именах, которое у вас есть. Ваша componentDidMount функция должна выглядеть следующим образом: 

componentDidMount() {
    var url = "https://test1-api.rescuegroups.org/v5/public/animals/breeds?fields[breeds]=name&fields[species]=singular,plural,youngSingular,youngPlural&include=species&options=meta&limit=10";
    const API_KEY = process.env.REACT_APP_API_KEY;

    fetch(url, {
        method: 'GET',
        headers: {
            Authorization: API_KEY,
            'Content-Type': 'application/json'}
    })
    .then(response => response.json())
    .then(json => this.setState({animals: json.data }))
}

Вам нужно вытащить клавишу data из ответа, которая с вашим текущим именем будет data.data.

В вашей функции рендеринга вы будете использовать animals из вашего состояния. Если бы вы хотели назвать животное, вы бы использовали следующее: 

render() {
    console.log(this.state);
    return (

        <div>
            {this.state.animals.map(animal => <div>{animal.attributes.name}</div>)}
        </div>

    )
}
1 голос
/ 14 марта 2019

Если вы уверены, что данные JSON, которые вы получаете, верны, то вы можете зациклить объект, используя следующий код. 

 Object.keys(this.state.animals).map((key) => {
    return <div value={key}>{ this.state.animals[key] }</div>
});
...