'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调用的其余部分工作正常。有人知道为什么我不能刷新吗?
1条答案
按热度按时间y53ybaqx1#
router.refresh()
用于服务器渲染的组件。它的工作原理是在服务器上重新渲染组件,并发送回一个带有更新数据的新版本-因此它不适用于面向客户端的组件,因为服务器上没有渲染任何内容(这是您在这里所拥有的,因为顶部的'use client'指令)Next 13 App Router beta docs:
在数据变化之后,您可以使用router.refresh()从根布局向下刷新(获取更新的数据并在服务器上重新呈现)当前路由。
如果你想在客户端处理变异,你必须自己管理状态并重新获取数据。