此问题已在此处有答案：

When should I use a return statement in ES6 arrow functions（6个答案）
6天前关闭
我已经把我的代码运行了无数次，但我不能找出问题所在。我正在跟随一个博客构建教程与Nextjs 13.4与Sanity.io。
在我的BlogList组件中，posts的console log显示了我在终端中的所有帖子，但是当我将帖子Map到UI时，页面上没有显示任何内容。
任何地方都没有错误的迹象。如果你能再看一下代码我会很高兴的。你可能会发现我错过的东西。
首页-关于我们

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>
    </>
  );
}

我的帖子的控制台日志

[
  {
    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] ]
  }
]