如何在next-13中重新呈现作为props传递的已经获取的数据？我试图获取tasks.data，它在布局中被获取以重新呈现（useEffect？）从另一个组件发送PUT请求时，我的TaskList组件中的。
布局：
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();
}任何帮助或提示我的代码非常感谢
1条答案
按热度按时间lmvvr0a81#
如果属性或状态发生更改，React将自动重新呈现。但问题是next.js 13应用程序目录默认缓存数据获取。你必须改变你的提取逻辑不缓存与
cache: 'no-store'选项