В настоящее время мое приложение может получать данные из моего API. Тем не менее, у меня возникают проблемы при переборе данных, чтобы я мог отобразить их через состояние. Я продолжаю получать следующее сообщение об ошибке в консоли: getSoups failed TypeError: Невозможно прочитать свойство 'map' undefined.
Он ссылается на следующий код:
getSoups() {
axios
.get('http://127.0.0.1:8000/api/soups/')
.then(response => {
console.log('soup response data', response);
response.data.soups.map(soup => ({
id: soup.id,
title: soup.title,
name: soup.name,
description: soup.description,
front_thumb_img_url: soup.front_thumb_img_url
}))
})
.then(soups => {
this.setState({
soups
});
})
.catch(error => {
console.log('getSoups failed', error);
});
}
Весь компонент: menu-container. js:
import React, { Component } from 'react';
import axios from 'axios';
import Soups from './soups-edited';
export default class MenuContainer extends Component {
constructor() {
super();
this.state = {
soups: []
};
this.getSoups = this.getSoups.bind(this);
}
getSoups() {
axios
.get('http://127.0.0.1:8000/api/soups/')
.then(response => {
console.log('soup response data', response.data.soups);
response.data.soups.map(soup => ({
id: soup.id,
title: soup.title,
name: soup.name,
description: soup.description,
front_thumb_img_url: soup.front_thumb_img_url
}))
})
.then(soups => {
this.setState({
soups
});
})
.catch(error => {
console.log('getSoups failed', error);
});
}
componentDidMount() {
this.getSoups();
}
render() {
const { soups } = this.state;
return (
<div className='soups'>
{ soups.map(soup => {
const { id, title, name, description,front_thumb_img_url } = soup;
return (
<ul key={id}>
<li>{title}</li>
<li>{name}</li>
<li>{description}</li>
<li>{front_thumb_img_url}</li>
</ul>
)
})}
</div>
);
}
}