主页 / coding / 问题 / 78354298
Accepted
eko pram
Asked: 2024-04-19 22:12:07 +0800 CST

如何为 Material UI 表中的每一行添加自动增量

  • 772

我正在通过从 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;

结果是这样的：

在此输入图像描述

reactjs

2 个回答

  1. Best Answer

    在 MongoDB 中，_id大部分是单调递增的十六进制字符串。但是，由于您只希望显示带有数字 ID 的项目，因此您可以在完成从 API 获取数据后对数据进行预处理。

    对于您的情况，您可以在从 API 获取 JSON 后执行此操作：

    async function getAppointment() {
  const res = await fetch("http://localhost:3000/api/appointment", {
    method: "GET",
    cache: "no-store",
  });
  const data = await res.json();
  // Here, you can add a numerically increasing index/ID to all the items
  return { ...data, appointment: data.appointment.map((row, index) => ({ ...row, index: index + 1 }) };
}

// After that, change the following to read from `index` key instead
const columns = [
  { id: "index", name: "#" },
  { id: "name", name: "Nama" },
  { id: "date", name: "Tanggal" },
  { id: "phone", name: "No Telp." },
  { id: "terapist", name: "Terapis" },
  { id: "statust", name: "Status" },
];
    • 1

  2. 您可以在响应作为 @AngYC 的答案返回时修改数据，也可以自定义column.id模板中索引的显示值。

    请注意，您需要更改数组中的索引变量columns，以j避免i与appointment.

    {appointment &&
  appointment.map((row, i) => {
    return (
      <TableRow key={i}>
        {columns &&
          columns.map((column, j) => {
            let value = column.id == '_id' ? i + 1 : row[column.id];
            return <TableCell key={value}>{value}</TableCell>;
          })}
      </TableRow>
    );
  })}

    我怀疑是否可以使用async. 您将收到此错误：对象作为 React 子项无效 (found: [object Promise])。

    所以你必须使用 React hooks:useState和useEffect函数，如下所示：

    import { useState, useEffect } from 'react';

export function Appointment() {
  const [appointment, setAppointment] = useState([]);

  useEffect(() => {
    async function fetchData() {
      setAppointment((await getAppointment()).appointment);
    }

    fetchData();
  }, []);

  ...

}

    演示@StackBlitz

    • 1

相关问题