我不知道，我在這里做錯了什么我總是這樣使用地圖我該如何解決這個問題我需要從 api 獲取例如 5 個最后的公告我怎么能做到這一點請幫助我我很困惑
JSON檔案是：
{
"announcements": [
{
"id": 647,
"title": "???? ?????? ??????? ????????? ???? ?????",
"content": "???? ?????? ??????? ????????? ???? ????? ??????? ???? (17/07/1400)<br />\r\n<br />\r\n\t\t\t<br />\r\n???????? ????? ????? 1400\t\t???? ????? ????<br />\r\n???????? ????? ????? 99\t\t???? ????? ?????<br />\r\n???????? ????? ????? 98\t\t???? ????? ????<br />\r\n???????? ????? ????? 97 ? ?????\t???? ???????? ??????<br />\r\n???????? ???? ??????\t??? ????? ??\t???? ????? ????<br />\r\n???????? ???? ????\t??? ????? ??\t???? ????? ????<br />\r\n???????? ???? ???? ??? ?????????\t??? ????? ??\t???? ????? ????<br />\r\n???????? ???? ??? ? ??????\t??? ????? ??\t???? ????? ?????<br />\r\n???????? ???? ?????? ????? ?????\t??? ????? ??\t???? ????? ????<br />\r\n <br />\r\n????????? ????? ?? ????? ?????? ???????? ??? ?????? ???? ????? ??? ?? ????? ??? ?? ???? ??? ? ?? ???? ?????? ????? ?? ?? ??? ????? ???? ???? ?????? ?? ????? ??????? ?????? ??? ?????? ??????.<br />\r\n",
"isImportant": false
},
{
"id": 675,
"title": "???? ????? ????? ??????? ?? ???????? ??? ????? ??????? ???????? ????? ??? ?????? ???",
"content": "<div style=\"text-align: justify;\"><span style=\"font-size: 12px;\">???? ????? ????? ??????? ?? ???????? ??? ????? ??????? ???????? ????? ??? ?????? ???</span><br></div>",
"isImportant": false
}
],
"pagination": {
"total": 212,
"lastPage": 106,
"perPage": 2,
"currentPage": 106,
"from": 210,
"to": 212
}
}
組件事件代碼：
import React, { useState, useEffect } from 'react'
function Events() {
const [announcements, fetchannouncements] = useState([]);
const getData = () => {
fetch('https://api.example.com')
.then((res) => res.json())
.then((res) => {
console.log(res)
fetchannouncements(res)
})
}
useEffect(() => {
getData()
}, [])
return (
<section id="events">
<div className="container-fluid">
<div className="events-title justify-content-center align-items-center">
<h1>?????? ??</h1>
<svg xmlns="http://www.w3.org/2000/svg" width="3" height="84" viewBox="0 0 3 84">
<line id="Line_32" data-name="Line 32" y2="84" transform="translate(1.5)" fill="none" stroke="#212121" strokeWidth="3"/>
</svg>
<h1>??????? ??</h1>
</div>
<div className="d-none d-md-block">
<div className="events row">
<a href="#">????? ???? ??????? ??</a>
{announcements.map((info) => {
return (
<div key = {info.id} className="events-items col-12 col-xxl-3 col-md-6 col-sm-12">
<div className="primary-texts">
<p className="primary-text">
{info.title}
</p>
</div>
<br/>
<div className="dates">
<span className="date">
<p className="number">
05
</p>
???? / ??????
</span>
</div>
</div>
);
})}
</div>
<div className="announcements row">
</div>
</div>
<div id="carouseleventsControls" className="carousel slide d-md-none" data-ride="carousel">
<div className="carousel-inner">
<div className="carousel-item active">
<div className="events-items col-12 col-xxl-3 col-md-6 col-sm-12">
<div className="primary-texts">
<p className="primary-text">
??????? ????? ???????
</p>
</div>
<br/>
<div className="dates">
<span className="date">
<p className="number">
05
</p>
???? / ??????
</span>
</div>
</div>
</div>
<div className="carousel-item">
<div className="events-items col-12 col-xxl-3 col-md-6 col-sm-12">
<div className="primary-texts">
<p className="primary-text">
????? ????? ???? ????? ???????
</p>
</div>
<br/>
<div className="dates">
<span className="date">
<p className="number">
05
</p>
???? / ??????
</span>
</div>
</div>
</div>
<div className="carousel-item">
<div className="events-items col-12 col-xxl-3 col-md-6 col-sm-12">
<div className="primary-texts">
<p className="primary-text">
????? ?????? ????? ????
</p>
</div>
<br/>
<div className="dates">
<span className="date">
<p className="number">
05
</p>
???? / ??????
</span>
</div>
</div>
</div>
<div className="carousel-item">
<div className="events-items col-12 col-xxl-3 col-md-6 col-sm-12">
<div className="primary-texts">
<p className="primary-text">
???????? ????? ??? ???
??? ?????? ????-????
</p>
</div>
<br/>
<div className="dates">
<span className="date">
<p className="number">
05
</p>
???? / ??????
</span>
</div>
</div>
</div>
</div>
<button className="carousel-control-prev" type="button" data-bs-target="#carouseleventsControls" data-bs-slide="prev">
<span className="carousel-control-prev-icon" aria-hidden="true"></span>
<span className="visually-hidden">????</span>
</button>
<button className="carousel-control-next" type="button" data-bs-target="#carouseleventsControls" data-bs-slide="next">
<span className="carousel-control-next-icon" aria-hidden="true"></span>
<span className="visually-hidden">????</span>
</button>
</div>
</div>
</section>
);
}
export default Events;
控制臺給了我 JSON 檔案的結果，但反應得到一個錯誤，告訴我 .map 不是一個函式。
uj5u.com熱心網友回復：
出現此錯誤是因為announcements不是陣列。
嘗試用getData這個替換你的函式，
const getData = () => {
fetch('https://api.example.com')
.then((res) => res.json())
.then((res) => {
console.log(res);
fetchannouncements(res?.announcements);
});
};
uj5u.com熱心網友回復：
您不能在 Object {} 上使用地圖。您需要在 fetchannouncements 函式中設定 res.announcements 而不是 res。
const getData = () => {
fetch('https://api.example.com')
.then((res) => res.json())
.then((res) => {
console.log(res.announcements)
fetchannouncements(res.announcements)
})
}轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/444683.html
標籤：javascript 反应 字典
上一篇：KIVY在外部條件下回圈遍歷影像