無法使用地圖渲染axios的回應-有解無憂

我在我的反應組件中遇到渲染 axios 獲得回應回應的問題。我可以看到我的獲取請求成功并且資料是從我的后端檢索的，但是在渲染時我收到此錯誤：

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

這是我的代碼：

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;

我不確定我的地圖功能有什么問題？

這是我的 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"},

uj5u.com熱心網友回復：

地圖沒有任何問題。startup不是陣列（或其他支持 .map 的型別）。 console.logapi 回應，你會看到它到底是什么。

您的代碼可能沒問題，API 只是以您期望的格式回傳資料。

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/364575.html

標籤：反应反应钩子

上一篇：反應。如何更新點擊元素的狀態

下一篇：如何在另一個陣列中插入一個陣列？