TypeError:data.map不是Reactjs函数

Question

我使用Reactjs，我使用nextjs，试图通过Api获取/获取数据但我得到以下错误

TypeError: data.map is not a function

这是我的代码(component/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

您似乎试图映射对象的数据

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

用data.data替换数据以使您的阵列处于您的状态

Answer 2

最初data是一个数组：

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

但当您将其更新为JSON响应时，它是一个对象：

setData(data);

因为您的JSON响应是一个对象：

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

该对象具有一个属性，该属性是一个数组。你的意思是要将状态设置为该属性吗？：

setData(data.data);