next.js Router.refresh()在下一个13?

pcww981p  于 2023-03-29  发布在  其他
关注(0)|答案(1)|浏览(132)
'use client';

import { useRouter } from "next/navigation";

export default function Todo({ todo }) {
    const router = useRouter();
    return (
        <>
            <li key={todo.id}>
                <input type='checkbox' checked={todo.isDone} onChange={(e) => update(todo.id, e.target.checked, router.refresh)}></input>
                {todo.name}
                <button onClick={() => todoDelete(todo.id, router)}>Delete</button>
            </li>
        </>
    )

    async function todoDelete(id, router) {
        await fetch(`/api/todo/delete?id=${id}`, {
            method: 'DELETE',
    
        });
        router.refresh();
    }
    
}

代码似乎跳过了refresh()函数,但API调用的其余部分工作正常。有人知道为什么我不能刷新吗?

y53ybaqx

y53ybaqx1#

router.refresh()用于服务器渲染的组件。它的工作原理是在服务器上重新渲染组件,并发送回一个带有更新数据的新版本-因此它不适用于面向客户端的组件,因为服务器上没有渲染任何内容(这是您在这里所拥有的,因为顶部的'use client'指令)
Next 13 App Router beta docs
在数据变化之后,您可以使用router.refresh()从根布局向下刷新(获取更新的数据并在服务器上重新呈现)当前路由。
如果你想在客户端处理变异,你必须自己管理状态并重新获取数据。

相关问题