如何在Next.js 13应用路由器中将数据从服务器组件传递到客户端组件?
我在page.tsx中调用了一个外部API,它给出了这个人的城市。我想将这个城市传递给客户端组件,在那里可以显示和更改这个城市。实现这一目标的最佳途径是什么?在React中,我们可以使用redux,但由于这是next.js 13服务器组件,因此不确定如何使用它。
app/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;
app/components/Navbar/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={() => selectLocationModal.onOpen()}
>
<p>{city}</p>
</div>
);
}
1条答案
按热度按时间bakd9h0s1#
您可以将数据作为props传递,只需要确保它是序列化的。
比如说