尝试在页面 REACT 上呈现数据库中的数据

Question

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

这是故障组件：

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"
}

Answer 1

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

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