Next.js13.4+Sanity项目中.map()渲染帖子不显示问题求助

我跟着教程用Next.js 13.4和Sanity.io搭建博客，反复检查代码都没找到问题。在BlogList组件里，console.log能在终端正常输出posts数据，但用.map()渲染的内容完全不显示，也没有任何报错提示，非.map()内的内容却能正常显示。

page.tsx - 博客首页 #

import { draftMode } from "next/headers";
import { groq } from "next-sanity";
import { client } from "@/lib/sanity.client";
import BlogList from "@/components/blog/BlogList.tsx";
import BlogHeader from "@/components/blog/BlogHeader";
import PreviewSuspense from "@/components/studio/PreviewSuspense";
import PreviewBlogList from "@/components/studio/PreviewBlogList";

const query = groq`
  *[_type=='post'] {
    ...,
    _id,
    _createdAt,
    author->,
    "slug": slug.current
  } | order(_createdAt desc)
`;

export default async function page() {
  const { isEnabled } = draftMode();
  if (isEnabled) {
    return (
      <PreviewSuspense
        fallback={
          <div role="status">
            <p className="text-center text-lg animate-pulse text-blue-800">
              Loading Draft Data
            </p>
          </div>
        }
      >
        <PreviewBlogList query={query} />
      </PreviewSuspense>
    );
  }

  const posts = await client.fetch<Post[]>(query);
  // console.log(posts);
  return (
    <>
      <BlogHeader />
      <section
        id="blog"
        className="w-full xl:pt-10 xl:pb-24 pb-12 p-4 flex flex-col gap-10 xl:gap-0 align-middle items-center border-b-[1px] border-b-gray-300 dark:border-b-gray-500"
      >
        <BlogList posts={posts} />
      </section>
    </>
  );
}

BlogList.tsx - 博客列表组件 #

页面上该组件中.map()内的内容完全不显示，但.map()外的内容可正常显示。

import Image from "next/image";
import { urlForImage } from "../../../sanity/lib/image";

interface Props {
  posts: Post[];
}

export default function BlogList({ posts }: Props) {
  console.log(posts);
  return (
    <>
      <div className="grid grid-cols-1 gap-8 mt-8 md:mt-16 md:grid-cols-2 xl:grid-cols-3">
        {posts.map((post) => {
          <div key={post._id} className="group cursor-pointer">
            <div className="relative w-full h-64 lg:h-80 group-hover:scale-105 drop-shadow-xl">
              <Image
                className="object-cover object-center rounded-lg"
                src={urlForImage(post.mainImage).url()}
                alt={post.author.name}
                fill
              />

              <h1>hello there</h1>

              <div className="absolute bottom-0 flex p-3 bg-white dark:bg-gray-900 ">
                <Image
                  className="rounded-full"
                  src={urlForImage(post.author.image).url()}
                  alt={post.author.name}
                  width={10}
                  height={10}
                />

                <div className="mx-4">
                  <h1 className="text-sm text-gray-700 dark:text-gray-200">
                    {post.author.name}
                  </h1>
                  <p className="text-sm text-gray-500 dark:text-gray-400">
                    {new Date(post._createdAt).toLocaleDateString("en-US", {
                      day: "numeric",
                      month: "numeric",
                      year: "numeric",
                    })}
                  </p>
                </div>
              </div>
            </div>

            <h1 className="mt-6 text-xl font-semibold text-gray-800 dark:text-white">
              {post.title}
            </h1>

            <hr className="w-32 my-6 text-blue-500" />

            <p className="text-sm text-gray-500 dark:text-gray-400">
              Lorem ipsum dolor sit amet consectetur adipisicing elit.
              Blanditiis fugit dolorum amet dolores praesentium, alias nam?
              Tempore
            </p>

            <a
              href="#"
              className="inline-block mt-4 text-blue-500 underline hover:text-blue-400"
            >
              Read more
            </a>
          </div>;
        })}
      </div>
    </>
  );
}

Posts控制台输出 #

[
  {
    slug: 'blog-development-with-next-13-4-and-sanity',
    mainImage: { _type: 'image', alt: 'Cover Image', asset: [Object] },
    publishedAt: '2023-06-14T11:15:00.000Z',
    _type: 'post',
    categories: [ [Object], [Object] ],
    title: 'Blog Development with Next 13.4 and Sanity',
    author: {
      name: 'Edward Opoku-Agyemang',
      _updatedAt: '2023-06-14T11:11:24Z',
      slug: [Object],
      image: [Object],
      _createdAt: '2023-06-14T11:11:24Z',
      _rev: 'sKRwurG6U83UyjXGn2pQeT',
      _type: 'author',
      bio: [Array],
      _id: '46ec3787-817d-441f-be7b-eab31e9ed3db'
    },
    _id: '0fa6470e-f88f-46d7-a127-a932b0f148fb',
    _updatedAt: '2023-06-14T11:15:49Z',
    _createdAt: '2023-06-14T11:15:33Z',
    _rev: 'TrPpVOhlpnRSDfzu76fyos',
    body: [ [Object], [Object], [Object], [Object] ]
  }
]

问题出在BlogList.tsx的.map()回调里——你没有返回JSX元素。箭头函数如果用大括号包裹，必须显式写return，否则默认返回undefined，页面自然渲染不出内容。

修改方式1：用圆括号代替大括号（自动返回JSX） #

{posts.map((post) => (
  <div key={post._id} className="group cursor-pointer">
    {/* 其余内容保持不变 */}
  </div>
))}

修改方式2：保留大括号，添加显式return #

{posts.map((post) => {
  return (
    <div key={post._id} className="group cursor-pointer">
      {/* 其余内容保持不变 */}
    </div>
  );
})}

两种方式都能解决问题，选你习惯的写法即可。

内容的提问来源于stack exchange，提问作者Edward Opoku-Agyemang