strapiv4api错误"posts.map is not a function"NextJs

Question

index.js 文件

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() {
  const res = await fetch("http://localhost:1337/api/posts");
  const posts = await res.json();

  return {
    props: { posts },
  };
}

这是我看到的错误“TypeError: posts.map is not a function” 有什么想法吗？

Answer 1

posts 是一个对象 — 您要对其调用 map 的帖子数组已分配给 posts.data:

export default function Home({ posts }) {
  const { data } = posts; // unpack `data` from `posts`

  // call `map()` on `data`
  return (
    <div>
      {data && data.length
        ? data.map((post) => (
            <div key={post.id}>
              <h2>{post.attributes.Title}</h2>
            </div>
          ))
        : "no posts"}
    </div>
  );
}

strapiv4api错误"posts.map is not a function"NextJs

Strapi v4 api error "posts.map is not a function" NextJs

api

blogs

strapi

next.js