Как мне получить объект из моего API для отображения содержимого API на странице? - PullRequest
Новая
       19

Как мне получить объект из моего API для отображения содержимого API на странице?

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

В настоящее время мое приложение может получать данные из моего 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>
        );
    }
}

Ответы [ 2 ]

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

На вашем месте я бы просто передал основной родительский объект (массив объектов) в состояние, а затем сделал бы сопоставление в компоненте. Таким образом будет легче отследить любые ошибки. Просто верните 

 this.setState({ soups: response.data });

вместо отображения в getSoups (). Я думаю, это вызывает проблемы. Короче говоря, передайте логи c (отображение) компоненту, чтобы лучше увидеть, каков будет результат.

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

Когда вы console.log response.data, вы получаете массив суповых объектов. Поэтому, исключив свойство .soups из вашего ответного запроса, вы смогли получить данные. Это связано с тем, что данные, возвращаемые из контроллера, не предоставляют объект со свойством soups.

Итак, вы можете просто отобразить свой ответ следующим образом: 

response.data.map((item) => {
     console.log(item);
 })

В качестве альтернативы, если вы хотите иметь свойство .soups в своем ответе json, вам нужно вернуть объект ответа, который имеет это отображение. Вы можете сделать это, возвращая объект или возвращая хеш-карту, содержащую массив soups с ключом «soups».

Надеюсь, это поможет.

...