NextJS 14 服务器组件在按下传递的函数后开始无限重新渲染

Question

我正在尝试使用 NextJS 制作简单的页面。

简化的结构如下所示：

<page> // Client component
    <List onPress={val =\> setState(val)} \> // Server component
    <Modal> // Client component
<page>

列表是这样完成的：

interface Props {
setEmbedId: (value: string) => void
}

export const ImagesList = async ({ setEmbedId }: Props) => {
const images = await getData() as ProjectData[]

return <div className="grid grid-cols-1 md:grid-cols-3">
    {images?.map(x => {
        return <div key={x.id}>
            <ImageCell onClick={() => {
                setEmbedId(x.videoUrl)
            }} title={x.title} description={x.description} />
        </div>
    })}
</div>
}

父组件是这样的：

export default async function Home() {
const \[embedId, setEmbedId\] = useState("")
return <div onClick={() => console.log("asas")}>
<TopMenu />
<ImagesList setEmbedId={id => setEmbedId(id)} />
<ModalVideo embedId={embedId} onClose={() => { setEmbedId("") }} />
<About />
<Contacts />
</div>
}

如果您有任何信息丢失，请告诉我:) 谢谢

我尝试自己编写代码，但在调用 setState 后，它开始重新渲染。即使我从根调用它，它也会开始重新渲染。所以总结一下，初始渲染后任何重新渲染都会导致无限重新渲染。

我尝试用谷歌搜索并在堆栈溢出中寻找答案，但没有运气。

我希望在我重新渲染父级后它不会重新渲染。

Answer 1

我将此作为答案发布，因为其他人可能也需要它。

1. 您无法将任何内容从客户端组件传递到服务器组件
2. 更不用说传递数据了。在客户端组件中导入服务器组件是一种反模式

至于您的解决方案，我相信您可以使用组合模式将服务器和客户端组件组合在服务器组件中