為了更多地了解組件以及它們如何在 api 呼叫中動態作業/讀取，我正在玩弄一個新聞 api。但是，我無法讓我的組件正確解構我的文章 json。
現在，我正在呼叫 api，現在只需通過復制和粘貼來提取“商業文章”，然后將其匯出為“博客帖子”。我的“ArticlesBox.jsx”包含我的道具。在“ArticlesWrapper.jsx”中，我宣告了一個應該在匯入組件的道具中讀取的函式 - 在“ArticlesWrapper()”中，我試圖映射我的 newsarticles.js 以創建所有新聞文章來自 api 呼叫的帖子。
到目前為止，它似乎映射了適當數量的文章，但我試圖映射的內容都沒有出現。換句話說，它只是用我的alt“失敗”制作了大量的盒子。
我的目標是最終能夠通過這個 api 映射并渲染大量新聞文章，無論呼叫有多大——但截至目前，我無法完成該任務。我在下面附上了我最新的一次嘗試迭代。提前謝謝你們！
文章框.jsx：
import "./ArticleBoxes.css";
export default function ArticleBoxes(props) {
return (
<div>
<div>
<img src={props.urlToImage} className="imgImage" alt="Failure"></img>
</div>
<div className="blogContent">
<h2 className="blogTitle">
<a className="blogTitleAnchor" href={props.url}>
{props.title}
</a>
</h2>
<div className=""></div>
<ul className=""></ul>
<div className=""></div>
</div>
</div>
);
}
文章Wrapper.jsx：
import "./ArticlesWrapper.css";
import ArticleBoxes from "./ArticleBoxes.jsx";
import BlogPosts from "./articles.js";
function createBlogPost(newsArticle) {
return (
<ArticleBoxes
key={newsArticle.id}
src={newsArticle.urlToImage}
href={newsArticle.url}
blogTitleAnchor={newsArticle.title}
/>
);
}
export default function ArticlesWrapper() {
return <div className="articlesWrapper">{BlogPosts.map(createBlogPost)}</div>;
}
以下是文章：
const BlogPosts = [
{
source: {
id: null,
name: "New York Post",
},
author: "Sam Raskin",
title:
"Wild video reportedly shows drunken flier shove girlfriend, slug airport worker - New York Post ",
description:
"The viral, 43-second clip captures the moment the would-be EasyJet passenger violently pushed his gal pal down and punched an airline employee after the flier wasn’t allowed on a flight",
url:
"https://nypost.com/2022/06/26/easyjet-passenger-shoves-girlfriend-punches-airport-worker/",
urlToImage:
"https://nypost.com/wp-content/uploads/sites/2/2022/06/easy-jet-comp.jpg?quality=75&strip=all&w=1024",
publishedAt: "2022-06-26T19:17:00Z",
content:
"Wild video shows a drunken British vacationer shoving his girlfriend to the floor and slugging a security worker at an airport in England after he was banned from a flight, according to reports. \r\nTh… [ 1742 chars]",
},
{
source: {
id: null,
name: "CNBC",
},
author: "Jessica Sonkin",
title:
"‘Apathetic’ investors will embrace banks: RBC top analyst predicts comeback in year’s second half - CNBC",
description:
"RBC Capital Markets' top banking analyst Gerard Cassidy expects strong revenue growth and optimism surrounding credit will boost banks.",
url:
"https://www.cnbc.com/2022/06/26/apathetic-investors-to-embrace-banks-rbc-top-analyst-sees-comeback.html",
urlToImage:
"https://image.cnbcfm.com/api/v1/image/106839744-1613124725309-gettyimages-1277228344-_dsc0449.jpeg?v=1656270600&w=1920&h=1080",
publishedAt: "2022-06-26T19:13:35Z",
content:
"Investors who are \"apathetic\" or negative toward banks will change their stance in the year's second half, according to RBC Capital Markets' top banking analyst.\r\nGerard Cassidy predicts bullishness … [ 2567 chars]",
},
{
source: {
id: null,
name: "Yahoo Entertainment",
},
author: "Alexandra Semenova",
title:
"Stocks pace towards worst start since 1970: What to know this week - Yahoo Finance",
description:
"The end of the second quarter and the first half of the year will bring a busy week to markets that remain on pace for their worst start to a year in decades...",
url:
"https://finance.yahoo.com/news/what-to-know-this-week-in-markets-june-27-184417186.html",
urlToImage:
"https://s.yimg.com/ny/api/res/1.2/cB7MggYAQk3eBkA6pJRp4A--/YXBwaWQ9aGlnaGxhbmRlcjt3PTEyMDA7aD04MDA-/https://s.yimg.com/os/creatr-uploaded-images/2022-06/800b17a0-f542-11ec-bdf3-77a6aa355e37",
publishedAt: "2022-06-26T18:44:17Z",
content:
"The week ahead will bring to an end the second quarter and the first half of what has been a challenging 2022 for investors.\r\nSeveral key economic reports, including core PCE inflation the Federal Re… [ 8151 chars]",
},
{
source: {
id: "cnn",
name: "CNN",
},
author: "Parija Kavilanz",
title:
"Just keep your returns: Stores weigh paying you not to bring back unwanted items - CNN",
description: "",
url: "https://www.cnn.com/2022/06/26/business/retail-returns/index.html",
urlToImage:
"https://media.cnn.com/api/v1/images/stellar/prod/220626130102-target-shopper-0518.jpg?c=16x9&q=w_800,c_fill",
publishedAt: "2022-06-26T17:15:00Z",
content:
"The chaotic mix of record fuel prices and an unending supply chain crisis have retailers considering the unthinkable: Instead of returning your unwanted items, just keep them.\r\nIn recent weeks, some … [ 3981 chars]",
},
{
source: {
id: "the-washington-post",
name: "The Washington Post",
},
author: "Joe Yonan",
title:
"Sweet potato salad with fresh salsa is a thrifty, tasty dish - The Washington Post",
description:
"This recipe from the team behind the ? Bosh ? vegan cooking channel is hearty, healthy — and affordable.",
url:
"https://www.washingtonpost.com/food/2022/06/26/sweet-potato-salsa-salad-recipe/",
urlToImage:
"https://www.washingtonpost.com/wp-apps/imrs.php?src=https://arc-anglerfish-washpost-prod-washpost.s3.amazonaws.com/public/THCSP3XTCII6ZLAWR67XDFGNPA.jpg&w=1440",
publishedAt: "2022-06-26T17:00:00Z",
content:
"Placeholder while article actions load\r\nHenry Firth and Ian Theasby have a simple answer to the question of how to save money on food: Cook.\r\nIn their latest book, Bosh on a Budget, the friends behin… [ 6482 chars]",
},
{
source: {
id: null,
name: "Yahoo Entertainment",
},
author: "Sam Ro",
title: "The bad economic news that the Fed is looking for - Yahoo Finance",
description:
"Federal Reserve Chair Jerome Powell reiterated the central bank’s top priority right now: Bringing down inflation.",
url:
"https://finance.yahoo.com/news/the-bad-economic-news-that-the-fed-is-looking-for-155728245.html",
urlToImage:
"https://s.yimg.com/os/creatr-uploaded-images/2022-06/f6ece680-f567-11ec-bfd6-300e76ca8a9a",
publishedAt: "2022-06-26T15:57:28Z",
content:
"This post was originally published on TKer.com.\r\nFederal Reserve Chair Jerome Powell reiterated the central banks top priority right now: Bringing down inflation.\r\nIts unconditional, our commitment, … [ 9229 chars]",
},
{
source: {
id: "fox-news",
name: "Fox News",
},
author: "Stephen Sorace",
title:
"Baby formula shipment arrives from overseas in Houston, enough for 1.5M bottles - Fox News",
description:
"A cargo plane carrying more than 150,000 pounds of baby formula from overseas landed at Bush Intercontinental Airport in Houston early Sunday, according to a local report.",
url: "https://www.foxnews.com/us/baby-formula-overseas-houston",
urlToImage:
"https://static.foxnews.com/foxnews.com/content/uploads/2022/06/baby-formula-empty-shelf.jpg",
publishedAt: "2022-06-26T15:51:22Z",
content:
"A cargo plane from Germany landed at Bush Intercontinental Airport in Houston, Texas, early Sunday, carrying more than 150,000 pounds of baby formula, according to a local report.\r\nThe shipment, part… [ 1609 chars]",
},
{
source: {
id: "cnn",
name: "CNN",
},
author: "Ramishah Maruf",
title: "All the recession warning signs this week - CNN",
description:
"It's the question everyone is asking: Are we about to enter a recession?",
url:
"https://www.cnn.com/2022/06/26/business/recession-signs-roundup/index.html",
urlToImage:
"https://media.cnn.com/api/v1/images/stellar/prod/220625141843-new-construction-california-0614-restricted.jpg?c=16x9&q=w_800,c_fill",
publishedAt: "2022-06-26T15:42:00Z",
content:
"Its the question everyone is asking: Are we about to enter a recession?\r\nA tepid stock market, soaring inflation, and rising interest rates have left Americans less than optimistic about the state of… [ 4793 chars]",
},
{
source: {
id: null,
name: "Yahoo Entertainment",
},
author: "Mike Bebernes",
title:
"Is it worth risking recession to get inflation under control? - Yahoo News",
description:
"Interest rates hikes can be a reliable tool for taming runaway prices, but they often lead to stifled economic growth and a spike in unemployment.",
url:
"https://news.yahoo.com/is-it-worth-risking-recession-to-get-inflation-under-control-150844387.html",
urlToImage:
"https://s.yimg.com/os/creatr-uploaded-images/2022-06/154e6ed0-f560-11ec-96bf-b0175df91c43",
publishedAt: "2022-06-26T15:08:44Z",
content:
"The 360 shows you diverse perspectives on the days top stories and debates.\r\nWhats happening\r\nBy most measures, the United States economy has thrived in the two-plus years since it was abruptly derai… [ 8173 chars]",
},
{
source: {
id: null,
name: "The Daily Hodl",
},
author: "Daily Hodl Staff",
title:
"Billionaire Mark Cuban Analyzes One of His Largest Crypto Investments, Outlines How Play-To-Earn Economies ... - The Daily Hodl",
description:
"Billionaire and Shark Tank star Mark Cuban is weighing in on how blockchain-based play-to-earn (P2E) games can revamp their economy.",
url:
"https://dailyhodl.com/2022/06/26/billionaire-mark-cuban-analyzes-one-of-his-largest-crypto-investments-outlines-how-play-to-earn-economies-can-recover/",
urlToImage:
"https://dailyhodl.com/wp-content/uploads/2022/02/gamestop-partners-with-nft.jpg",
publishedAt: "2022-06-26T14:30:13Z",
content:
"Billionaire and Shark Tank star Mark Cuban is weighing in on how blockchain-based play-to-earn (P2E) games can revamp their economy.\r\nIn a new interview with Bankless, Cuban, who’s an investor in Axi… [ 1973 chars]",
},
{
source: {
id: "google-news",
name: "Google News",
},
author: null,
title:
"Why This Crypto Crash Is Different: Don't Fight The... - Investor's Business Daily",
description: null,
url:
"https://news.google.com/__i/rss/rd/articles/CBMiVmh0dHBzOi8vd3d3LmludmVzdG9ycy5jb20vbmV3cy9iaXRjb2luLWNyYXNoLWNyeXB0by1pY2UtYWdlLWZlZC1yYXRlLWhpa2VzLWFyZS1yZWFzb24v0gEA?oc=5",
urlToImage: null,
publishedAt: "2022-06-26T14:27:00Z",
content: null,
},
{
source: {
id: null,
name: "msnNOW",
},
author: null,
title:
"Lawn mower recall: This popular mower can catch fire just sitting in your garage - msnNOW",
description: null,
url:
"https://www.msn.com/en-us/lifestyle/shopping/lawn-mower-recall-this-popular-mower-can-catch-fire-just-sitting-in-your-garage/ar-AAYSJmw?li=BBnb2gh",
urlToImage: null,
publishedAt: "2022-06-26T13:12:59Z",
content: null,
},
{
source: {
id: null,
name: "Benzinga",
},
author: "Henry Khederian",
title:
"So Which Will Happen First, Ethereum At $10K Or Dogecoin At $0.50? - Benzinga - Benzinga",
description:
"Every week, Benzinga conducts a survey to collect sentiment on what traders are most excited about, interested in or thinking about as they manage and build their personal portfolios.",
url:
"https://www.benzinga.com/markets/cryptocurrency/22/04/26557793/which-will-first-ethereum-at-10k-or-dogecoin-at-0-50",
urlToImage:
"https://cdn.benzinga.com/files/images/story/2022/04/09/polynesia-3021072_1.jpg?width=1200&height=800&fit=crop",
publishedAt: "2022-06-26T13:12:00Z",
content:
"Every week, Benzinga conducts a survey to collect sentiment on what traders are most excited about, interested in or thinking about as they manage and build their personal portfolios.\r\nThis week, we … [ 1593 chars]",
},
{
source: {
id: "associated-press",
name: "Associated Press",
},
author: "Paul Wiseman",
title:
"Did corporate greed fuel inflation? It's not biggest culprit - The Associated Press - en Espa?ol",
description:
"WASHINGTON (AP) — Furious about surging prices at the gasoline station and the supermarket, many consumers feel they know just where to cast blame: On greedy companies that relentlessly jack up prices and pocket the profits.",
url:
"https://apnews.com/article/inflation-russia-ukraine-covid-health-government-and-politics-999a756b89b09b65d335856cf570737e",
urlToImage:
"https://storage.googleapis.com/afs-prod/media/30649c6512354e78abee8fd35d537916/3000.jpeg",
publishedAt: "2022-06-26T13:08:06Z",
content:
"WASHINGTON (AP) Furious about surging prices at the gasoline station and the supermarket, many consumers feel they know just where to cast blame: On greedy companies that relentlessly jack up prices … [ 8733 chars]",
},
{
source: {
id: "google-news",
name: "Google News",
},
author: null,
title:
"Inflation is why tips are down for some service-sector workers - USA TODAY",
description: null,
url:
"https://news.google.com/__i/rss/rd/articles/CBMicGh0dHBzOi8vd3d3LnVzYXRvZGF5LmNvbS9zdG9yeS9tb25leS9wZXJzb25hbGZpbmFuY2UvMjAyMi8wNi8yNi9pbmZsYXRpb24tdGlwcy1kb3duLXJlc3RhdXJhbnRzLWJhcnMvNzcwNjY3NDAwMS_SAQA?oc=5",
urlToImage: null,
publishedAt: "2022-06-26T13:00:59Z",
content: null,
},
{
source: {
id: null,
name: "CNBC",
},
author: "Tanaya Macheel",
title:
"No-fee trading has arrived for crypto. Here's what that may mean for revenue at these companies - CNBC",
description:
"Crypto companies are at a crossroads with the introduction of zero-fee trading. Analysts are uncertain about how these trading platforms may handle it.",
url:
"https://www.cnbc.com/2022/06/26/no-fee-trading-has-arrived-for-crypto-heres-what-that-may-mean-for-revenue-at-these-companies.html",
urlToImage:
"https://image.cnbcfm.com/api/v1/image/106868438-1618431329101-gettyimages-1232307162-COINBASE_IPO.jpeg?v=1656247277&w=1920&h=1080",
publishedAt: "2022-06-26T12:34:21Z",
content: null,
},
{
source: {
id: "cnn",
name: "CNN",
},
author: "Paul R. La Monica, CNN Business",
title: "Electronic Arts is still the odd one out in gaming - CNN",
description:
"All things considered, video game leader Electronic Arts is having a pretty decent year despite inflation worries, recession fears and other macroeconomic headwinds. Shares of EA are only down about 2% in 2022, a drop that's not nearly as bad as the rest of t…",
url:
"https://www.cnn.com/2022/06/26/investing/stocks-week-ahead/index.html",
urlToImage:
"https://cdn.cnn.com/cnnnext/dam/assets/220623155025-electronic-arts-fifa-game-file-super-tease.jpg",
publishedAt: "2022-06-26T12:00:00Z",
content:
"A version of this story first appeared in CNN Business' Before the Bell newsletter. Not a subscriber? You can sign up right here.\r\nNew York (CNN Business)All things considered, video game leader Elec… [ 4339 chars]",
},
{
source: {
id: null,
name: "CNBC",
},
author: "Macklin Fishman",
title:
"Exxon Mobil CEO cautions against an abrupt energy transition, warning underinvestment leads to high gas prices - CNBC",
description:
"The CEO of Exxon Mobil cautions against an abrupt energy transition, warning underinvestment will lead to high gas prices.",
url:
"https://www.cnbc.com/2022/06/26/exxon-mobil-ceo-darren-woods-on-energy-transition-gas-prices.html",
urlToImage:
"https://image.cnbcfm.com/api/v1/image/107078620-1655836217414-Z-CNBC_220624_MarketsPolitics_DarrenIntvFormal_Dirty_10.jpg?v=1655836425&w=1920&h=1080",
publishedAt: "2022-06-26T11:05:01Z",
content:
'Exxon Mobil CEO Darren Woods warns that an abrupt transition to renewable energy will cause society to "pay a high price."\r\nThe national average price for a gallon of gasoline is currently nearly $5,… [ 1702 chars]',
},
{
source: {
id: "fortune",
name: "Fortune",
},
author: "Shawn Tully",
title:
"The housing market is weakening fast—but there are no signs yet that a 2008-style crash is coming - Fortune",
description:
"But a slowdown in housing market gains isn't the same as a drop in prices. Quite the contrary: The fundamentals suggest values will still be rising at the close of 2022, and keep slogging ahead through next year.",
url:
"https://fortune.com/2022/06/26/housing-market-outlook-prices-appreciation/",
urlToImage:
"https://content.fortune.com/wp-content/uploads/2022/06/Real-Estate-13.jpg?resize=1200,600",
publishedAt: "2022-06-26T11:00:00Z",
content: "Skip to Content",
},
{
source: {
id: "reuters",
name: "Reuters",
},
author: null,
title: "French energy giants urge consumers to cut energy use - Reuters",
description:
"The heads of France's big energy companies on Sunday urged individuals and businesses to limit power consumption immediately to prepare for a looming energy crisis.",
url:
"https://www.reuters.com/business/energy/french-energy-companies-call-immediately-limiting-energy-use-2022-06-25/",
urlToImage:
"https://www.reuters.com/resizer/waL_fZbMKICoos0Z_6TE8DQAi3k=/1200x628/smart/filters:quality(80)/cloudfront-us-east-2.images.arcpublishing.com/reuters/PZEB2J6Y7FNI5NPQIRVUZRZACU.jpg",
publishedAt: "2022-06-26T10:48:00Z",
content:
"PARIS, June 25 (Reuters) - The heads of France's big energy companies on Sunday urged individuals and businesses to limit power consumption immediately to prepare for a looming energy crisis.\r\n\"We ne… [ 1942 chars]",
},
];
export default BlogPosts;
uj5u.com熱心網友回復：
嘗試這個
<ArticleBoxes
key={newsArticle.source.id}
src={newsArticle.urlToImage}
href={newsArticle.url}
blogTitleAnchor={newsArticle.title}
/>
我猜如果你檢查你的控制臺你會發現它id是未定義的。您還需要為每個 ID 定義唯一的 ID，因為在您的資料中，大多數 ID 都是null
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/496083.html
標籤：javascript 反应 json 成分 析构函数