我想在 react 中使用 news api 創建一個新聞網站，但我無法顯示來自 json 的文章。我認為 fetch 函式是正確的，但它在控制臺中列印了兩次資料。我不知道為什么，如果你知道，請告訴我。另外，我無法使用陣列上的地圖列印顯示的文章串列，請告訴我，我真的很困惑。
const [News, setNews] = useState([]);
useEffect(() => {
fetch(
`https://newsapi.org/v2/top-headlines?country=in&category=${category}&apiKey=${API_KEY}`
)
.then((response) => response.json())
.then((data) => {
console.log(data.articles);
setNews(data.articles);
});
}, [category]);
作為回報，我想獲取文章串列，但它只是讓我的桌面螢屏空白，甚至沒有出現錯誤。
<ul>
{News.map((data) => {
<li key={data.title}>{data.title}</li>;
})}
</ul>
控制臺回傳
(20) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]
0: {source: {…}, author: null, title: 'E-invoicing ‘soon to be mandated’ for units with over ?10-cr turnover - BusinessLine', description: null, url: 'https://news.google.com/__i/rss/rd/articles/CBMikg…b3JlLW5leHQvYXJ0aWNsZTY1NTk0OTcyLmVjZS9hbXAv?oc=5', …}
1: {source: {…}, author: null, title: 'Cancer Horoscope for July 2022 - Susan Miller Astrology Zone - Astrology Zone', description: 'The latest in astrological trends by Susan Miller,…r advancement, travel, health, fitness, and more.', url: 'https://www.astrologyzone.com/forecasts/cancer-horoscope-for-july-2022/', …}
2: {source: {…}, author: 'Riya Ghosh', title: 'iPhone User? Know all about the WhatsApp Blur Tool - Techstory', description: 'This latest technology introduced by WhatsApp enab…ent of the picture before ', …}
3: {source: {…}, author: null, title: 'Supreme Court Judge Who Heard Nupur Sharma Plea Slams "Personal Attacks" - NDTV', descripti.....}
.....
請告訴我我做錯了什么
uj5u.com熱心網友回復：
您的代碼中有錯字：
console.log(data.articles);
setNews(data.articals);
data.articles 和 data.articals ？
uj5u.com熱心網友回復：
對于在控制臺列印兩次的問題，可能與嚴格模式有關，如果您使用的是 React 18 并且開啟了嚴格模式，那么在開發模式下它會運行兩次 useEffect，在生產模式下它會正常作業一次。您可以閱讀官方檔案并查看Youtube 視頻，其中清楚地解釋了這樣做的原因。
對于第二個問題為什么不能列印文章串列，它與 News.map 在這里你缺少回傳宣告有關
<ul>
{News.map((data) => {
return <li key={data.title}>{data.title}</li>;
})}
</ul>
讓我知道這是否有幫助。
uj5u.com熱心網友回復：
問題 1：控制臺列印兩次
這是因為如果您使用 React 18，useEffect 會運行兩次 - 請檢查 Chrome 開發工具上的網路選項卡以驗證請求是否被發送兩次。
您可以使用 if/else 陳述句，如果資料已經被提取，則不要再次呼叫 API。
問題 2：不顯示串列
那是因為您缺少 MAP 函式中的 return 陳述句。
<ul>
{News.map((data) => {
return <li key={data.title}>{data.title}</li>;
})}
</ul>
希望這可以幫助！
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/497964.html
標籤：javascript 反应 数组 目的 拿来
上一篇：將for回圈縮短為一個