Není schopen vykreslit axios odpověď s mapou

0

Otázka

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"},
 
react-hooks reactjs
2021-11-23 23:30:24
1

Nejlepší odpověď

0

Není nic špatného na mapě. startup není pole (nebo jiný typ podpory .mapu). console.log odpověď api a uvidíte, co to opravdu je.

Jste kód je pravděpodobně v pořádku API je jen vrací data v jiném formátu, než to, co očekáváte.

2021-11-23 23:35:58

Díky přidali odpověď!
ziwdig44bugs

@ziwdig44bugs můžete konzoli.log začínajících uvnitř vykreslit a ukázat nám, co se přihlásí? Toto rozhraní API odpověď se zdá být rozumné.
nlta

ukazuje to : [object Object]
ziwdig44bugs

Jsi první odhad se zdá být v pořádku, problém je s mým dat, protože reagují chybové ukazuje, že linka, ale není si jistý, co je špatně.
ziwdig44bugs

To znamená, že jste stringified objekt někde. ({some: 'obj'}).toString(). Dělá StartUpService.getAll() vrátit JSON objekt nebo řetězec, který potřebujete JSON.parse? Zkuste přihlášení, že odpověď API a ujistěte se, že je to skutečný JS objekt, který NENÍ řetězec, který může být analyzován do objektu.
nlta

Díky, opravdu jsem adde pak část, aby mi dostat všechno, teď to funguje ! díky const getAll = () => { return http.get('/začínajících/').pak((reakce) => reakce.data); };
ziwdig44bugs

V jiných jazycích

Tato stránka je v jiných jazycích

Русский
..................................................................................................................
Italiano
..................................................................................................................
Polski
..................................................................................................................
Română
..................................................................................................................
한국어
..................................................................................................................
हिन्दी
..................................................................................................................
Français
..................................................................................................................
Türk
..................................................................................................................
Português
..................................................................................................................
ไทย
..................................................................................................................
中文
..................................................................................................................
Español
..................................................................................................................
Slovenský
..................................................................................................................