小编Vis*_*war的帖子

如何在 Next.js 13 应用程序路由器中将数据从服务器组件传递到客户端组件？

我正在 page.tsx 中调用外部 API，它给出了该人的城市。我想将这个城市传递给可以显示和更改该城市的客户端组件。实现这一目标的最佳方法是什么？在 React 中，我们可以使用 redux，但由于这是 next.js 13 服务器组件，不知道如何操作。

应用程序/page.tsx

const Page = async () => {
  const city = await getCity();

  const hotels = await getHotelsByCity({
    city: city,
  });

  return (
    <div className="pt-24 md:pt-28 flex md:flex-row md:flex-wrap flex-col">
      {hotels &&
        hotels.map((hotel) => {
          <div>{hotel}</div>;
        })}
    </div>
  );
};

export default Page;

应用程序/组件/导航栏/Location.tsx

"use client";

import useSelectLocationModal from "@/app/hooks/useSelectLocationModal";

export default function Location() {
  const selectLocationModal = useSelectLocationModal();

  return (
    <div
      className="flex items-center cursor-pointer"
      onClick={() …