JSON 格式导致 .map 不是函数

Question

用目前的方式 strapi 输出一个 JSON 我总是得到错误 .map 不是一个函数。这是一个 NEXT.JS 前端。难道这是因为 JSON 没有作为数组输出？

import React, { useEffect } from "react";

export default function Home({ posts }) {
  return (
    <div>
      {posts &&
        posts.map((post) => (
          <div key={post.id}>
            <h2>{post.title}</h2>
          </div>
        ))}
    </div>
  );
}

export async function getStaticProps() {
  // get games from the api
  const res = await fetch("http://localhost:1337/api/games");
  const posts = await res.json();
  return {
    props: { posts },
  };
}

这里我得到：类型错误：posts.map 不是一个函数

有没有人能告诉 JS 初学者如何解决这个问题？

JSON 输出如下：

{"data":[{"id":1,"attributes":{"title":"Guild Wars 2","createdAt":"2022-02-04T20:14:17.254Z","updatedAt":"2022-02-05T10:52:55.696Z","publishedAt":"2022-02-05T10:52:55.693Z","url":"https://www.guildwars2.com","description":"Guild Wars 2 is an online role-playing game with fast-paced action combat, a rich and detailed universe of stories, awe-inspiring landscapes to explore, two challenging player vs. player modes—and no subscription fees!","free":false,"feature_combat":"Fast-paced combat and choose from an arsenal of professions, weapons, and playstyles. Attack on the move, dodge and roll away from enemy blows, and come to your allies' rescue midbattle.","feature_world":"A beautifull designed, rich and detailed universe of stories, awe-inspiring landscapes to explore.","feature_quests":"No questgivers but an exploartion oriented roam around quest system with housands of stories that change based on the actions of players like you.","feature_grouping":"In the open world, you can team up with every player you meet—no grouping required! Also offeres Raids and dungeons for groups.","feature_usp":"Quick, furious matches between small groups of players in organized PvP or join hundreds of other players in the grand battles of World vs. World"}},{"id":2,"attributes":{"title":"Firefly Online","createdAt":"2022-02-05T11:01:39.549Z","updatedAt":"2022-02-05T11:04:40.562Z","publishedAt":"2022-02-05T11:04:40.558Z","url":"www.keepflying.com","description":"\nFACTS\nOS:\nSetting:\nSci-Fi\nGenre:\nRPG\nRelease Year:\n2014\nPayment Model:\nfree to play\nPVP:\nPay for features:\nItem Shop:\nMonthly fee:\nLanguage: ","free":null,"feature_combat":"Seek out adventures","feature_world":"Assume the role of a ship captain – create a crew and customize a ship","feature_quests":"Online role playing game based on Firefly, Joss Whedon’s cult-hit television series Firefly","feature_grouping":"Hire a crew","feature_usp":"Cross-platform player experience across devices"}}],"meta":{"pagination":{"page":1,"pageSize":25,"pageCount":1,"total":2}}}

Answer 1

这是因为 posts 是 JSON object 而不是可以使用 map() 函数的数组。相反，您需要先将数组提供给 map() 函数，然后才能提取标题。

要访问 JSON object 的数组，您可以使用 posts['data'].

export default function Home({ posts }) {
  return (
    <div>
      {posts &&
        posts["data"].map((post) => (
          <div key={post.id}>
            <h2>{post.attributes.title}</h2>
          </div>
        ))}
    </div>
  );
}

JSON 格式导致 .map 不是函数

JSON format leads to .map is not a function

reactjs

strapi

next.js