Я, наконец, не получаю никаких ошибок, но теперь я не могу получить данные, поступающие из моей базы данных, для отображения на странице
Вот компонент проблемы:
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"
}