尝试在 REACT 页面上从数据库中呈现数据答案

【问题标题】：Trying to render data on from database on page REACT尝试在 REACT 页面上从数据库中呈现数据
【发布时间】：2020-01-12 17:39:56
【问题描述】：

我终于没有收到任何错误，但现在我无法从我的数据库中获取数据以呈现在页面上

这里是问题组件：

import React, { Component } from 'react';
import axios from 'axios';

export default class ListPets extends Component {

    constructor(props) {
        super(props);

        this.state = {
            pets: {},
            isLoaded: false,
        }  
    }

    componentDidMount = () => {
        This. getPets ();
    };

    getPets = async () => {  
        const res = await axios.get('http://localhost:5000/pets');
        const pets = res.data;
        this.setState({ isLoaded: true, pets });
        console.log('Data has been received!');
    }

    render() {
        console.log('State: ', this.state);

        const { isLoaded, pets  } = this.state;

        if (!isLoaded) {
            return <div>Loading...</div>;
        } else {

            return (
                <div>
                    <ul>
                        {Object.entries(pets).map(([key, pet]) => ( 
                             <li key={key}>{pet.name}</li>
                        ))}
                    </ul>
                </div>
            );
        }
    }
}

这是我试图从我的数据库中呈现的数据


{
    "_id": "5dfe7b55a3678700785c9b69",
    "species": "Collie",
    "name": "Dax",
    "age": "2",
    "petImage": "C:\\fakepath\\brown-and-white-dog-4633734_640.jpg"
}
{
    "_id": "5dfe828af33fa800ac8b49c8",
    "species": "lab",
    "name": "bea",
    "age": "1",
    "petImage": "C:\\fakepath\\puppy-1207816_640.jpg"
}
{
    "_id": "5dfea025ea5cc2016e528f5a",
    "species": "pittbull",
    "name": "nina",
    "age": "3",
    "petImage": "C:\\fakepath\\pitbull1.jpg"
}
{
    "_id": "5dfea0c229d0d4017b982f35",
    "species": "pittbull",
    "name": "nina",
    "age": "3",
    "petImage": "C:\\fakepath\\pitbull1.jpg"
}
{
    "_id": "5dfea63eb1505e018a2ba363",
    "species": "pittbull",
    "name": "Gina",
    "age": "3",
    "petImage": "C:\\fakepath\\pitbull1.jpg"
}
{
    "_id": "5dfea7a1fed64001b9632b8f",
    "species": "pittbull",
    "name": "kat",
    "age": "2",
    "petImage": "C:\\fakepath\\pitbull1.jpg"
}

【问题讨论】：

对于初学者，您需要在 componentDidMount 函数中将 this 小写：this.getPets();
如果您没有从 localhost:5000 提供您的 React 页面，请确保数据库响应具有适当的标头（Access-Control-Allow-Origin），否则它将作为 CORS 问题被阻止.
res.data 在您的控制台中返回什么？

标签： javascript reactjs axios

【解决方案1】：

如果您正在获取数据，请使用状态

 return (
                <div>
                    <ul>
                        {this.state.pets.map(pet => ( 
                             <li key={pet.id}>{pet.name}</li>
                        ))}
                    </ul>
                </div>
            );
        }
    }
}

【讨论】：

使用它返回错误 TypeError: this.state.pets.map is not a function
是因为 state.pets 是一个对象，所以它是一个数组
我怎样才能使它成为一个数组？顺便谢谢
this.state = { pets: [], isLoaded: false, }
从您所在州的宠物中将 {} 更改为 []