作为 props 传递时，如何重新渲染 next-13 中已获取的数据？ 当我从另一个组件发送 PUT 请求时，我试图获取在布局中获取的tasks.data，以在我的 TaskList 组件内重新渲染(useEffect？)。
我已尝试设置缓存:无存储，但仍然需要刷新页面才能看到更改。
布局:
import TaskList from "@/components/tasks/TaskList";
import SetTaskForm from '@/components/tasks/SetTaskForm';
import { getAllTasks } from "@/utils/actions";
export default async function RootLayout({
children
}: {
children: React.ReactNode;
}) {
const tasks = await getAllTasks()
return (
<html lang='en'>
<body>
<main>{children}
<SetTaskForm />
<TaskList tasks={tasks} />
</main>
</body>
</html>
);
}
任务列表:
"use client"
import { TasksProps } from "@/types/taskTypes"
import Task from "./Task"
import { Suspense, useEffect } from "react";
export default function TaskList ({ tasks }: TasksProps) {
useEffect(() => {
}, [tasks])
return (
<section className="py-9 flex flex-col justify-center">
<h2 className="text-xl font-semibold mt-6 border-b pb-1 text-center">Tasks</h2>
<Suspense fallback={<div>Loading...</div>}>
<ul className="flex flex-col mx-3">
{tasks?.data?.map((task: TaskProps) => (
<li key={task.id}>
<Task
key={task._id}
title={task.title}
body={task.body}
bgColor={task.bgColor}
isCollapsed={task.isCollapsed}
isCompleted={task.isCompleted}
/>
</li>
))}
</ul>
</Suspense>
</section>
)
}
任务:
"use client"
import { deleteTask, toggleCollapseTask, toggleCompletedTask } from "@/utils/actions";
import { TaskProps } from "@/types/taskTypes";
import 'material-icons/iconfont/material-icons.css'
import { useState } from "react";
export default function Task({ id, title, body, isCollapsed, bgColor, isCompleted }: TaskProps) {
const [collapsed, setCollapsed] = useState(isCollapsed)
const [completed, setCompleted] = useState(isCompleted)
const handleCollapse = () => {
setCollapsed(!collapsed)
toggleCollapseTask(title, collapsed)
}
const handleCompleted = () => {
setCompleted(!completed)
toggleCompletedTask(title, completed)
}
return (
<section>
<div>
<h1>{title}</h1>
<span
onClick={e => deleteTask(title)}
>delete</span>
</div>
<div>
<span onClick={handleCollapse}>expand_more</span>
{!collapsed && <a>{body}</a>}
</div>
</section>
);
}
路线:
import { PrismaClient } from "@prisma/client";
import { NextResponse} from "next/server"
const prisma = new PrismaClient()
export async function GET(request: Request) {
const data = await prisma.tasks.findMany()
return NextResponse.json({ data })
}
行动:
"use server";
export async function getAllTasks() {
const res = await fetch("http://localhost:3000/api/getAllTasks"
);
if (!res.ok) {
throw new Error("Failed to fetch data");
}
return res.json();
}
非常感谢有关我的代码的任何帮助或提示
最佳答案
来自docs
A layout is UI that is shared between multiple pages. On navigation, layouts preserve state, remain interactive, and do not re-render.
这就是布局的重点。它将防止不必要的组件重新渲染。由于布局未重新渲染，因此您不会从服务器获取新数据。你应该revalidate data
fetch('https://...', { next: { revalidate: 10 } });
关于reactjs - 当我的数据在接下来的 13 年发生更改时，如何重新渲染？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/76349454/