eko pram's questions

/组件/按钮.tsx

“客户端组件”

export const DeleteButton = ({ id }: { id: string }) => {
  const deleteImageWithId = deleteImage.bind(null, id);
  return (
    <form
      action={deleteImageWithId}
      className="py-3 text-sm bg-gray-50 rounded-br-md w-full hover:bg-gray-100 text-center"
    >
      <DeleteBtn />
    </form>
  );
};

/lib/actions.ts

“服务器组件”

// Delete Image
export const deleteImage = async (id: string) => {
  const data = await getImageById(id);
  if (!data) return { message: "No data found" };

  await del(data.image);
  try {
    await prisma.upload.delete({
      where: { id },
    });
  } catch (error) {
    return { message: "Failed to delete data" };
  }

  revalidatePath("/");
};

错误信息：

./components/button.tsx:44:7 Type error:
  Type '() => Promise<{ message: string; } | undefined>' is not assignable to type 'string | ((formData: FormData) => void | Promise<void>) | undefined'.
  Type '() => Promise<{ message: string; } | undefined>' is not assignable to type '(formData: FormData) => void | Promise<void>'.
  Type 'Promise<{ message: string; } | undefined>' is not assignable to type 'void | Promise<void>'.
  Type 'Promise<{ message: string; } | undefined>' is not assignable to type 'void | Promise<void>'.
  Type 'Promise<{ message: string; } | undefined>' is not assignable to type 'Promise<void>'.
  Type '{ message: string; } | undefined' is not assignable to type 'void'.
  Type '{ message: string; }' is not assignable to type 'void'.

我正在通过从 Material UI 创建表并从 MongoDB 获取数据来构建 Next.js 项目。如何操作表中的数据？

我想要“#”列在每一行中具有从 1、2、3、4、5 等开始的自动递增值。

这是我的代码：

数据模型：

{
    appointment: [
      {
        _id: '6609339e8891194adf3beb60',
        name: 'tuyi',
        date: '2024-03-31',
        phone: '45454',
        terapist: 'fdgdf',
        statust: 'done'
      },
    ]
}

页面.jsx

async function getAppointment() {
  const res = await fetch("http://localhost:3000/api/appointment", {
    method: "GET",
    cache: "no-store",
  });
  // const data = await res.json();
  return res.json();
}

async function Appointment() {
  const { appointment } = await getAppointment();

  const columns = [
    { id: "_id", name: "#" },
    { id: "name", name: "Nama" },
    { id: "date", name: "Tanggal" },
    { id: "phone", name: "No Telp." },
    { id: "terapist", name: "Terapis" },
    { id: "statust", name: "Status" },
  ];

  return (

      <TableContainer>
        <Table>
          <TableHead>
            <TableRow>
              {columns.map((column) => (
                <TableCell key={column.id}>{column.name}</TableCell>
              ))}
            </TableRow>
          </TableHead>
          <TableBody>
            {appointment &&
              appointment.map((row, i) => {
                return (
                  <TableRow key={i}>
                    {columns &&
                      columns.map((column, i) => {
                        let value = row[column.id];
                        return <TableCell key={value}>{value}</TableCell>;
                      })}
                  </TableRow>
                );
              })}
          </TableBody>
        </Table>
      </TableContainer>
    </div>
  );
}

export default Appointment;

结果是这样的：