Question

How do I go about re-rendering my already fetched data in next-13 when passed as props? I m trying to get tasks.data which is fetched in the layout to rerender (useEffect?) inside of my TaskList component when I send a PUT request from another component.

排位:

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

我的法典的任何帮助或暗示都受到高度赞赏。

Answer 1

如果推进或国家改变,反应将自动进行。但问题是下一个问题。 j 13个数据库按违约计算。页: 1

export async function getAllTasks() {
  const res = await fetch("http://localhost:3000/api/getAllTasks",
   {
         cache:  no-store ,    
   }
  );
  if (!res.ok) {
    throw new Error("Failed to fetch data");
  }
  return res.json();
}

友情链接