使用 React 显示来自 API 的数据

Question

我正在尝试使用 map 显示来自 https://newsapi.org/ API 的数据，但出现此错误： “articles.map 不是函数”。

我可以毫无问题地从另一个 API 在同一个程序中显示数据。我认为这与我从 API 获得的 JSON 有关。我从能够显示的 API 返回的 JSON 中的每个对象都有一个唯一的 ID 属性，我可以在我的 props 键中使用它。此 ID 已为此目的明确设置。 newsapi 中的对象没有像 ID 这样的属性。虽然 JSON 中有一些属性具有唯一值，但可以用于提供该功能，所以我认为 JSON 可能没有其他潜在问题。谁能看出问题出在哪里？

下面是我可以显示的 JSON。

[
  {
    "id": "rec6d6T3q5EBIdCfD",
    "name": "Best of Paris in 7 Days Tour",
    "info": "Paris is synonymous with the finest things that culture can offer — in art, fashion, food, literature, and ideas. On this tour, your Paris-savvy Rick Steves guide will immerse you in the very best of the City of Light: the masterpiece-packed Louvre and Orsay museums, resilient Notre-Dame Cathedral, exquisite Sainte-Chapelle, and extravagant Palace of Versailles. You'll also enjoy guided neighborhood walks through the city's historic heart as well as quieter moments to slow down and savor the city's intimate cafés, colorful markets, and joie de vivre. Join us for the Best of Paris in 7 Days!",
    "image": "https://dl.airtable.com/.attachments/a0cd0702c443f31526267f38ea5314a1/2447eb7a/paris.jpg",
    "price": "1,995"
  },
  {

。 . .

以下是来自 newsapi 的 JSON，我无法显示

{
  "status": "ok",
  "totalResults": 38,
  "articles": [
    {
      "source": {
        "id": null,
        "name": "CBS Sports"
      },
      "author": "Brian Campbell",
      "title": "Errol Spence Jr. vs. Danny Garcia fight results: Live boxing updates, scorecard, start time, undercard - CBSSports.com",
      "description": "Follow live as a pair of welterweight titles are on the line in Arlington, Texas",
      "url": "https://www.cbssports.com/boxing/news/errol-spence-jr-vs-danny-garcia-fight-results-live-boxing-updates-scorecard-start-time-undercard/live/",
      "urlToImage": "https://sportshub.cbsistatic.com/i/r/2019/09/26/2582e7ad-d4e3-4845-86ac-8996ab597932/thumbnail/1200x675/5325daca4acf1cd4f34fd5bf64003992/errol-spence-jr.jpg",
      "publishedAt": "2020-12-06T04:27:00Z",
      "content": "Welterweight supremacy is on the line on Saturday night in Arlington, Texas, when unified champion Errol Spence Jr. takes on Danny Garcia in the main event of a Fox PPV. It will be Spence's (26-0, 21… [+1770 chars]"
    },
    {

Answer 1

“articles.map 不是函数”。意味着文章需要是一个数组。您只能在 Javascript 中映射数组。

确实，第一个 JSON（解析时）是一个数组。它以 [ 开头并以 ] 结尾。在这个数组内部，有一个或多个对象。

第二个 JSON 只是一个对象。您正在从 api 接收对象，因为它们正在添加更多信息，例如状态和 totalResults。 例如，您可以使用 status 属性来了解响应的状态，并使用 totalResults 来进行分页。 然后他们会为您提供您正在寻找的一系列文章。

您只能通过此数组进行映射。

因此，假设您将 api 调用的结果存储在变量数据中，您的地图函数将如下所示： data.articles.map((element) => {... do something with element ... })