TypeError：data.map 不是函數 Reactjs

Question

我正在使用 Reactjs，我正在使用 nextjs，我正在嘗試通過 Api 獲取/獲取數據但我收到以下錯誤

TypeError: data.map is not a function

這是我的代碼（組件/Slider.js）

import React from 'react'
import { useState,useEffect } from 'react'
const Slider = () => {
 const [data,setData]=useState([]);
  useEffect(()=>{
        const getData =async() =>{
            const response =await fetch("http://localhost:1337/api/sliderinfos");
            const data = await response.json();
              setData(data);
        };
        getData();
  });
  
  return (
    <div className="main-banner header-text">
  
  {data.map((article) => (
      <li key={article.id}>{article.id}</li>
    ))}
    </div>
     )
    }
    
    export default Slider

Here is my json response
{"data":[{"id":1,"attributes":{"category":"FASHION","createdAt":"2022-07-19T04:52:38.578Z","updatedAt":"2022-07-19T04:52:40.001Z","publishedAt":"2022-07-19T04:52:39.996Z","title":"Morbi Dapibus Condimentum","createdby":"Admin","description":"Lorem Ipsum one"}},{"id":2,"attributes":{"category":"NATURE","createdAt":"2022-07-19T05:07:59.368Z","updatedAt":"2022-07-19T05:08:00.606Z","publishedAt":"2022-07-19T05:08:00.603Z","title":"Donec Porttitor Augue At Velit","createdby":"Admin","description":"Lorem Ipsum two"}},{"id":3,"attributes":{"category":"LIFESTYLE","createdAt":"2022-07-19T05:11:10.975Z","updatedAt":"2022-07-19T05:11:12.065Z","publishedAt":"2022-07-19T05:11:12.062Z","title":"Best HTML Templates On TemplateMo","createdby":"Admin","description":"Lorem Ipsum three."}},{"id":4,"attributes":{"category":"FASHION","createdAt":"2022-07-19T05:12:26.883Z","updatedAt":"2022-07-19T05:12:28.013Z","publishedAt":"2022-07-19T05:12:28.010Z","title":"Responsive And Mobile Ready Layouts","createdby":"Admin","description":"Lorem Ipsum four."}},{"id":5,"attributes":{"category":"NATURE","createdAt":"2022-07-19T05:14:02.093Z","updatedAt":"2022-07-19T05:14:03.204Z","publishedAt":"2022-07-19T05:14:03.200Z","title":"Cras Congue Sed Augue Id Ullamcorper","createdby":"admin","description":"Lorem Ipsum five."}},{"id":6,"attributes":{"category":"LIFESTYLE","createdAt":"2022-07-19T05:15:53.198Z","updatedAt":"2022-07-19T05:15:54.213Z","publishedAt":"2022-07-19T05:15:54.210Z","title":"Suspendisse Nec Aliquet Ligula","createdby":"admin","description":"Lorem Ipsum six"}}],"meta":{"pagination":{"page":1,"pageSize":25,"pageCount":1,"total":6}}}

Answer 1

最初data是一個數組：

const [data,setData]=useState([]);

但是當您將其更新為 JSON 響應時，它是一個對象：

setData(data);

因為您的 JSON 響應是一個對象：

{"data":[/*...*/]}

該對象有一個屬性，它是一個數組。 您的意思是將狀態設置為該屬性嗎？：

setData(data.data);

Answer 2

您似乎試圖映射作為對象的數據

    useEffect(()=>{
        const getData =async() =>{
            const response =await fetch("http://localhost:1337/api/sliderinfos");
            const data = await response.json();
              setData(data.data);
        };
        getData();
  });

用 data.data 替換數據以使您的數組處於您的狀態