我正在尝试在 json 下面的 React 中映射循环，但它显示映射不是一个函数。如何通过map函数从api获取数据，如下面的json？谁能帮助我正确获取这些数据？提前谢谢。
{
"message": "Successfully loaded data.",
"courseData": [
{
"id": 3,
"user_id": "1",
"trainer_id": "2",
"course_name": "Admin Full Support",
"regular_price": "12000",
"discount_price": "8000",
"trainer": null,
"photo": "https://itder.com/storage/uploads/course/8655491729531301.png",
"status": "1",
"created_at": "21-10-2024 17:21:41",
"updated_at": "21-10-2024 17:21:41",
"trainer_data": {
"id": 2,
"user_id": "1",
"name": "Bashir Ahmed",
"phone": "01947225599",
"details": "Hi",
"photo": "https://itder.com/storage/uploads/trainer/6951221729531073.png",
"status": "1",
"created_at": "21-10-2024 17:17:53",
"updated_at": "21-10-2024 17:17:53"
}
},
{
"id": 1,
"user_id": "1",
"trainer_id": "1",
"course_name": "English",
"regular_price": "200",
"discount_price": "100",
"trainer": null,
"photo": "https://itder.com/storage/uploads/course/4624191729512058.png",
"status": "1",
"created_at": "21-10-2024 12:00:58",
"updated_at": "21-10-2024 12:00:58",
"trainer_data": {
"id": 1,
"user_id": "1",
"name": "Masud Akbar",
"phone": "01897865456",
"details": "hi",
"photo": "https://itder.com/storage/uploads/trainer/5702571729512011.png",
"status": "1",
"created_at": "21-10-2024 12:00:11",
"updated_at": "21-10-2024 12:00:11"
}
},
{
"id": 7,
"user_id": "1",
"trainer_id": "3",
"course_name": "Facebook Ad Campaign",
"regular_price": "500",
"discount_price": "100",
"trainer": null,
"photo": "https://itder.com/storage/uploads/course/7190441729599935.jpeg",
"status": "1",
"created_at": "22-10-2024 12:25:35",
"updated_at": "22-10-2024 12:25:35",
"trainer_data": {
"id": 3,
"user_id": "1",
"name": "Dhrubo Jyoti Das",
"phone": "01774444000",
"details": "hi",
"photo": "https://itder.com/storage/uploads/trainer/4606921729531092.png",
"status": "1",
"created_at": "21-10-2024 17:18:12",
"updated_at": "21-10-2024 17:18:12"
}
},
{
"id": 6,
"user_id": "1",
"trainer_id": "3",
"course_name": "Graphics Full Support",
"regular_price": "12500",
"discount_price": "12000",
"trainer": null,
"photo": "https://itder.com/storage/uploads/course/5304721729531416.png",
"status": "1",
"created_at": "21-10-2024 17:23:36",
"updated_at": "21-10-2024 17:23:36",
"trainer_data": {
"id": 3,
"user_id": "1",
"name": "Dhrubo Jyoti Das",
"phone": "01774444000",
"details": "hi",
"photo": "https://itder.com/storage/uploads/trainer/4606921729531092.png",
"status": "1",
"created_at": "21-10-2024 17:18:12",
"updated_at": "21-10-2024 17:18:12"
}
},
{
"id": 5,
"user_id": "1",
"trainer_id": "3",
"course_name": "Medical Admission",
"regular_price": "25000",
"discount_price": "22000",
"trainer": null,
"photo": "https://itder.com/storage/uploads/course/1433531729531385.png",
"status": "1",
"created_at": "21-10-2024 17:23:05",
"updated_at": "21-10-2024 17:23:05",
"trainer_data": {
"id": 3,
"user_id": "1",
"name": "Dhrubo Jyoti Das",
"phone": "01774444000",
"details": "hi",
"photo": "https://itder.com/storage/uploads/trainer/4606921729531092.png",
"status": "1",
"created_at": "21-10-2024 17:18:12",
"updated_at": "21-10-2024 17:18:12"
}
},
{
"id": 4,
"user_id": "1",
"trainer_id": "4",
"course_name": "Python Engineering",
"regular_price": "25000",
"discount_price": "22000",
"trainer": null,
"photo": "https://itder.com/storage/uploads/course/2878081729531330.png",
"status": "1",
"created_at": "21-10-2024 17:22:10",
"updated_at": "21-10-2024 17:22:10",
"trainer_data": {
"id": 4,
"user_id": "1",
"name": "Mojaddid-E-Alfe Sany",
"phone": "01733165886",
"details": "hi",
"photo": "https://itder.com/storage/uploads/trainer/7753901729531123.png",
"status": "1",
"created_at": "21-10-2024 17:18:44",
"updated_at": "21-10-2024 17:18:44"
}
},
{
"id": 2,
"user_id": "1",
"trainer_id": "1",
"course_name": "The Complete WordPress Website Course",
"regular_price": "18000",
"discount_price": "15000",
"trainer": null,
"photo": "https://itder.com/storage/uploads/course/9298281729531272.png",
"status": "1",
"created_at": "21-10-2024 17:21:12",
"updated_at": "21-10-2024 17:21:12",
"trainer_data": {
"id": 1,
"user_id": "1",
"name": "Masud Akbar",
"phone": "01897865456",
"details": "hi",
"photo": "https://itder.com/storage/uploads/trainer/5702571729512011.png",
"status": "1",
"created_at": "21-10-2024 12:00:11",
"updated_at": "21-10-2024 12:00:11"
}
}
],
"status_code": 201
}
下面给出了我尝试过的一些代码，这些数据也来自邮递员，
const [course, setCourse] = useState([]);
useEffect(() => {
fetch('https:examplewebsite///')
.then(res => res.json())
.then(data => setCourse(data))
.catch(error => console.log(error))
},[])
console.log(course);
{
course.map((crs, index) => {
<div key={index}>
<h1>{crs.message}</h1>
{
courseData.map(crsdt => {
<div>
<h1>{crsdt.id}</h1>
</div>
})
}
</div>
})
}
这里给出了一些我尝试过的代码。
将
courseconst [course, setCourse] = useState([]);
并期望它是一个数组：
course.map((crs, index) => {
但是，您将其完整更新为 JSON 响应：
.then(data => setCourse(data))
该 JSON 响应不是数组。 它是一个物体。 如果目标是将状态设置为该对象上的
courseData.then(data => setCourse(data.courseData))