我正在创建一个建议事件组件。我想从一个对象数组中渲染4个随机项。它工作了一瞬间，显示4个随机项目，但随后它重新加载另外4个项目，给我2个错误：
错误：文本内容与服务器呈现的HTML不匹配。
错误：在对该暂停边界进行水合时出错。切换到客户端渲染。

export function SuggestedEvents() {
  function getMultipleRandom(
    posts: {
      id: number
      title: string
      description: string
      image: string
      date: string
    }[],
    num: number | undefined
  ) {
    const shuffled = [...posts].sort(() => 0.5 - Math.random())

    return shuffled.slice(0, num)
  }

  return (
    <section className="py-6 lg:py-10">
      <div className="grid grid-cols-1 gap-4 md:grid-cols-3 lg:grid-cols-4">
        {getMultipleRandom(posts, 4).map((item) => (
          <Link href={`/browse/${item.id}`} key={item.id}>
            <EventCard
              title={item.title}
              description={item.description}
              image={item.image}
              date={item.date}
              key={item.id}
            />
          </Link>
        ))}
      </div>
    </section>
  )
}

const posts = [
  {
    id: 1,
    title: "This is a really cool title btw",
    description:
      "This is a really cool title btw and everyone likes it a lot. This is a really cool title btw.",
    image: "/images/1.jpeg",
    date: "01/11/2023",
  },
  {
    id: 2,
    title: "This is a really cool title btw",
    description:
      "This is a really cool title btw and everyone likes it a lot btw and everyone likes it a lot",
    image: "/images/2.jpeg",
    date: "01/11/2023",
  },
  {
    id: 3,
    title: "This is a really cool title btw",
    description: "This is a really cool title btw and everyone likes it a lot",
    image: "/images/3.jpeg",
    date: "01/11/2023",
  },
  {
    id: 4,
    title: "This is a really cool title btw",
    description:
      "This is a really cool title btw and everyone likes it a lot btw and everyone likes it a lot",
    image: "/images/4.jpeg",
    date: "01/11/2023",
  },
  {
    id: 5,
    title: "This is a really cool title btw",
    description: "This is a really cool title btw and everyone likes it a lot",
    image: "/images/5.jpeg",
    date: "01/11/2023",
  },
  {
    id: 6,
    title: "This is a really cool title btw",
    description: "This is a really cool title btw and everyone likes it a lot",
    image: "/images/6.jpeg",
    date: "01/11/2023",
  },
  {
    id: 7,
    title: "This is a really cool title btw",
    description: "This is a really cool title btw and everyone likes it a lot",
    image: "/images/7.jpeg",
    date: "01/11/2023",
  },
  {
    id: 8,
    title: "This is a really cool title btw",
    description: "This is a really cool title btw and everyone likes it a lot",
    image: "/images/8.jpeg",
    date: "01/11/2023",
  },
  {
    id: 9,
    title: "This is a really cool title btw",
    description: "This is a really cool title btw and everyone likes it a lot",
    image: "/images/9.jpeg",
    date: "01/11/2023",
  },
  {
    id: 10,
    title: "This is a really cool title btw",
    description: "This is a really cool title btw and everyone likes it a lot",
    image: "/images/10.jpeg",
    date: "01/11/2023",
  },

我认为这是因为.map运行在我所有的数组项目上，而不仅仅是我想要的4个切片项目，但我不确定。
这个模拟的数组在某个时候将来自大量用户发布内容的API，所以我最终会从那里随机抓取一些帖子。