Router.refresh() 在接下来的 13 中没有刷新？

Question

'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();
    }
    
}

该代码似乎直接跳过了刷新（）函数，但 API 调用的其余部分工作正常。有谁知道为什么我无法刷新吗？

Answer 1

我也有类似的问题。就我而言，我router.refresh();首先router.push('/users')从更新页面导航回数据表。

然而，正确的实现应该是router.push('/users')先执行，然后执行router.refresh();。

Answer 2

@阿德姆。useRouter是react hook，只能在客户端调用

useRouter.refresh 是https://nextjs.org/docs/app/api-reference/functions/use-router。

您可能正在谈论“next/router”中的 useRouter，它在 next13 中不可用

Answer 3

router.refresh()适用于服务器渲染的组件。它的工作原理是在服务器上重新渲染组件并发送回带有更新数据的新版本 - 因此它不适用于面向客户端的组件，因为服务器上没有渲染任何内容（这就是您在这里所拥有的，因为顶部的“使用客户端”指令）

从 Next 13 App Router 测试版开始文档：

数据突变后，您可以使用 router.refresh() 进行刷新（获取更新的数据并从根布局向下刷新（获取更新的数据并在服务器上重新渲染）当前路由。

如果你想在客户端处理突变，你必须自己管理状态并重新获取数据。