如何从我的 api 中获取对象以在页面上显示 api 内容？答案

【问题标题】：How do I get the object from my api to display the api content on the page?如何从我的 api 中获取对象以在页面上显示 api 内容？
【发布时间】：2020-04-04 10:39:51
【问题描述】：

目前，我的应用程序能够从我的 API 获取数据。但是，我在迭代数据时遇到了麻烦，因此我可以通过状态显示它。我在控制台中不断收到以下错误消息：getSoups failed TypeError: Cannot read property 'map' of 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>
        );
    }
}

【问题讨论】：

您可以将组件粘贴到您显示结果的位置吗？您最好在组件本身中进行映射。
尝试console.log(response.data.soups) 看看它是否被定义了。
@randomboiguyhere 当我只是 console.log(response) 它显示对象。但是对于 console.log(response.data.soups) 它是未定义的。
@JohnGartsu 那么为什么要使用.soups？你不能用response.map()吗？
我想.soups 部分是未定义的。我会尝试两件事：最初是console.log(response.data)。检查并确认该 JSON 对象有一个名为 soups 的属性。如果没有，这就是你的答案。

标签： reactjs django-rest-framework axios

【解决方案1】：

如果我是你，我只会传递状态中的主要父对象（对象数组），然后在组件中进行映射。因此，跟踪任何错误将更容易。直接返回

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

而不是 getSoups() 中的映射。我想这会造成麻烦。简而言之，将逻辑（映射）转移到组件以更好地查看结果。

【讨论】：

这里是引用代码解决方案的副本：getSoups() { axios .get('http://127.0.0.1:8000/api/soups/') .then(response => { this.setState({ soups: response.data }); }) .catch(error => { console.log('getSoups failed', error); }); }

【解决方案2】：

当你 console.log response.data 你得到一个汤对象数组。因此，通过从响应查询中排除 .soups 属性，您可以获取数据。这是因为您从控制器返回的数据没有提供具有soups 属性的对象。

所以，您可以像这样映射您的响应：

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

或者，如果您想在 json 响应中包含 .soups 属性，则需要返回具有此映射的响应实体。您可以通过返回一个对象或通过返回一个包含带有“soups”键的汤数组的哈希图来做到这一点。

希望对你有所帮助。

【讨论】：