React .map возвращает значение undefined с помощью Fetch API
Я хочу, чтобы мой метод 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;
Любые советы приветствуются!
Я знаю! Я должен был уточнить, что лучше я попробовал data.type, а также более глубокий уровень data.type.breeds, которые оба вызывают ошибки. Я не должен был использовать результаты в своем вопросе.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 3
Если вы уверены, что данные JSON, которые вы получаете, верны, вы можете перебрать объект, используя следующий код.
Object.keys(this.state.animals).map((key) => {
return <div value = {key}>{ this.state.animals[key] }</div>
});
Параметр метода обратного вызова с именем «данные» не означает, что это свойство data данных ответа.
Я думаю, что обратный вызов должен быть
...
.then(response => response.json())
.then(response => this.setState({animals: response.data}))
<div>
{this.state.animals.map(animal => <div>{animal.type}</div>)}
</div>
Да, я не понимал, что «данные» - это то, что я определял сам. Мне нужно выяснить, как заставить работать ключи (сочетая ваш ответ с ответом Парта Пателя), но, по крайней мере, я вижу отображаемые данные, с которыми я могу работать. Спасибо!
Я думаю, что это сбивает вас с толку из-за немного запутанного соглашения об именах, которое у вас есть. Ваша функция 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.info(this.state);
return (
<div>
{this.state.animals.map(animal => <div>{animal.attributes.name}</div>)}
</div>
)
}
then(data => this.setState({animals: data.results })), судя по вашему json, в нем нет поляresults.