Jsem čelí problému vykreslování axios dostat odpověď reagovat reagovat komponenty. Vidím, že moje žádost bude úspěšná a že data jsou načtena z mého backend však při vykreslování dostanu tuto chybu :
TypeError: startup.map is not a function
CardList
C:/personalworkspace/unicorn/front/src/components/CardList.js:30
27 |
28 | return (
29 | <div className="card list">
> 30 | <Grid container spacing={4}>
| ^ 31 | {startup.map((startups) => (
32 | <Grid key={startups.id} item xs={4}>
33 | <Link to={{ pathname: `product/${startups.id}` }}>
Tady je můj kód :
import React from 'react';
import CardComponent from './CardComponent';
import { Grid } from '@material-ui/core';
import { Link } from 'react-router-dom';
import { useState, useEffect } from 'react';
import StartUpService from './../Services/StartUpService';
const CardList = () => {
const [startup, setstartups] = useState([]);
useEffect(() => {
retrieveTutorials();
}, []);
const retrieveTutorials = () => {
StartUpService.getAll()
.then((response) => {
const myData = response.data;
setstartups(myData);
console.log(myData);
})
.catch((e) => {
console.log(e);
});
};
return (
<div className="card list">
<Grid container spacing={4}>
{startup.map((startups) => (
<Grid key={startups.id} item xs={4}>
<Link to={{ pathname: `product/${startups.id}` }}>
<CardComponent
className="cards"
key={startups.id}
id={startups.id}
image={startups.image}
header={startups.header}
title={startups.title}
category={startups.category}
summary={startups.summary}
/>
</Link>
</Grid>
))}
</Grid>
</div>
);
};
export default CardList;
Nejsem si jistý, co je špatně s mým mapa funkce?
Tady je první objekt, moje odpověď API :
{"data":[{"id":1,"header":"First Start Up Header","title":"Title for
Startup 1","category":"First Start Up Category","description":"First
Start Up description","tags":
["FINTECH"],"card_image":"http://localhost:8000/media/card_images/card1.jpg","logo_image":"http://localhost:8000/media/logo_images/1.png"},