Nextjs 13.4 error.tsx，reset() 不起作用（用于获取）

Question

我正在使用应用程序路由器，error.tsx 页面。 我正在使用一个从“json-server”获取数据的服务器组件，因此当服务器关闭时，会出现 error.tsx 并带有重试按钮。运行服务器后，我单击重试按钮，该按钮调用重置（）方法，但没有重新加载（提取应该正常发生）

该组件在服务器组件中被调用

import { Ticket } from "@/models/ticket";
import { log } from "console";
import Link from "next/link";
import React, { Suspense } from "react";
import TicketCard from "./ticketCard";

const getTickets = async () => {
  //Imitate Delay
  // await new Promise((resolve) => setTimeout(resolve, 3000));

  const response = await fetch("http://localhost:4000/tickets", {
   next: { revalidate: 0 /*Seconds - 0 removes cahcing*/ },
  });
  return response.json();
};

export default async function TicketList() {
  const tickets: Ticket[] = await getTickets();

  return (
    <section className="flex flex-col">
      {tickets.map((ticket: any) => <TicketCard ticket={ticket} key={ticket.id} />).reverse()}
      {tickets.length === 0 && (
        <p className="text-center text-2xl font-bold">No Tickets Yet!</p>
      )}
    </section>
  );
}

错误.tsx

"use client"; // Error components must be Client Components

import Link from "next/link";
import { useEffect } from "react";

export default function Error({
  error,
  reset,
}: {
  error: Error & { digest?: string };
  reset: () => void;
}) {
  useEffect(() => {
    // Log the error to an error reporting service
    //
    console.error(error);
  }, [error]);

  return (
    <div className="flex flex-col justify-center items-center m-auto pt-16 ">
      <h2>Something went wrong!</h2>
      <p className="text-red-500 text-sm mt-3">
        Error Message :: {error.message}
      </p>
      <div className="flex gap-4">
        <button
          className="rounded-md py-2 px-4 mt-6 bg-yellow-500 text-white"
          onClick={
            // Attempt to recover by trying to re-render the segment
            () => reset()
          }
        >
          Try again
        </button>
        <Link
          href="/"
          className="rounded-md py-2 px-4 mt-6 bg-green-600 text-white"
        >
          Go Home
        </Link>
      </div>
    </div>
  );
}

我正在使用应用程序路由器，error.tsx 页面。 我正在使用一个从“json-server”获取数据的服务器组件，因此当服务器关闭时，会出现 error.tsx 并带有重试按钮。运行服务器后，我单击重试按钮，该按钮调用重置（）方法，但没有重新加载（提取应该正常发生）

Answer 1

我可以用下面的方法解决它。

之前：

onClick={
  // Attempt to recover by trying to re-render the segment
  () => reset()
}

之后：

onClick={
  // Attempt to recover by trying to re-render the segment
  router.refresh() // used useRouter() hook
  startTransition(reset)
}

我在以下假设下提出了这个想法

• reset()

  再次使用之前的错误结果，而不是重新渲染服务器组件并使用该结果重试。
• 刷新页面会重新渲染服务器组件。
• 由于React的批处理，我们需要使用

  startTransition()

  • https://github.com/vercel/next.js/discussions/45829#discussioncomment-4954973
  • 我通过依次单击两个按钮进行了测试
    • （第一个执行刷新，第二个执行重置）=> 已工作
  • 所以我使用

    startTransition()

    到

    reset

    功能。