React Component沒有正確解構json

Question

為了更多地了解組件以及它們如何在 api 調用中動態工作/讀取，我正在玩弄一個新聞 api。 但是，我無法讓我的組件正確解構我的文章 json。

現在，我正在調用 api，現在只需通過復制和粘貼來提取“Business Articles”，然后將其導出為“BlogPosts”。 我的“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;

Answer 1

嘗試這個

  <ArticleBoxes
      key={newsArticle.source.id}
      src={newsArticle.urlToImage}
      href={newsArticle.url}
      blogTitleAnchor={newsArticle.title}
    />

我猜如果你檢查你的控制台，你會發現id是未定義的。 您還需要為每個 ID 定義唯一的 ID，因為在您的數據中大多數 ID 為null