ReactJs-Table-Array：在 table 中显示数组元素时缺少一个元素

Question

我有一个项目，在这个项目中，员工的工资显示在table中，我从后端获取数据并显示在table

中]

后台返回的响应是：

{
    "data": [
        {
            "id": 2,
            "userId": 26,
            "createdAt": "2022-02-26T15:33:40.977Z",
            "updatedAt": "2022-02-26T15:33:40.977Z",
            "deletedAt": null,
            "user": {
                "name": "samara kamal",
                "roles": [
                    "user"
                ],
                "id": 26,
                "email": "samara@ria.com",
                "firstName": "samara",
                "lastName": "kamal",
                "phoneNumber": "0947483381",
                "avatarId": null,
                "isActive": true,
                "isVerified": true,
                "createdAt": "2022-02-14T20:49:16.841Z",
                "updatedAt": "2022-02-14T21:00:02.638Z",
                "deletedAt": null,
                "associatedRoles": [
                    {
                        "id": 22,
                        "userId": 26,
                        "roleId": 5,
                        "role": {
                            "id": 5,
                            "name": "user"
                        }
                    }
                ],
                "avatar": null
            },
            "salary": {
                "id": 2,
                "workStartDate": "2022-01-01T01:00:00.000Z",
                "workEndDate": "2022-02-01T01:00:00.000Z",
                "amount": 1500,
                "bonus": 150,
                "allowance": 0,
                "receiptId": 2,
                "createdAt": "2022-02-26T15:33:40.987Z",
                "updatedAt": "2022-02-26T15:33:40.987Z",
                "deletedAt": null
            },
            "deductions": [
                {
                    "id": 2,
                    "receiptId": 2,
                    "type": "loan",
                    "amount": 200,
                    "reason": "You have took a loan...",
                    "createdAt": "2022-02-26T15:33:40.991Z",
                    "updatedAt": "2022-02-26T15:33:40.991Z",
                    "deletedAt": null
                }
            ]
        },
        {
            "id": 1,
            "userId": 26,
            "createdAt": "2022-02-26T10:32:19.082Z",
            "updatedAt": "2022-02-26T10:32:19.082Z",
            "deletedAt": null,
            "user": {
                "name": "samara kamal",
                "roles": [
                    "user"
                ],
                "id": 26,
                "email": "samara@ria.com",
                "firstName": "samara",
                "lastName": "kamal",
                "phoneNumber": "0947483381",
                "avatarId": null,
                "isActive": true,
                "isVerified": true,
                "createdAt": "2022-02-14T20:49:16.841Z",
                "updatedAt": "2022-02-14T21:00:02.638Z",
                "deletedAt": null,
                "associatedRoles": [
                    {
                        "id": 22,
                        "userId": 26,
                        "roleId": 5,
                        "role": {
                            "id": 5,
                            "name": "user"
                        }
                    }
                ],
                "avatar": null
            },
            "salary": {
                "id": 1,
                "workStartDate": "2022-01-01T01:00:00.000Z",
                "workEndDate": "2022-02-01T01:00:00.000Z",
                "amount": 2500,
                "bonus": 200,
                "allowance": 0,
                "receiptId": 1,
                "createdAt": "2022-02-26T10:32:19.095Z",
                "updatedAt": "2022-02-26T10:32:19.095Z",
                "deletedAt": null
            },
            "deductions": [
                {
                    "id": 1,
                    "receiptId": 1,
                    "type": "loan",
                    "amount": 200,
                    "reason": "You have took a loan...",
                    "createdAt": "2022-02-26T10:32:19.104Z",
                    "updatedAt": "2022-02-26T10:32:19.104Z",
                    "deletedAt": null
                }
            ]
        }
    ],
    "count": 2
}

从之前的回复中可以清楚地看出，有一个推论矩阵

通过这个简单的代码，我尝试访问“deductions.amount”：

                    {n.deductions.map((deduction) => {
                      <TableCell
                        // className="p-4 md:p-10"
                        component="th"
                        scope="row"
                        align="left"
                      >
                        {deduction.amount}
                      
                      </TableCell>;
                    })}

但它没有出现在 table 中，因为在这张图片中很清楚：

我该如何解决这个问题？

这是完整的 table 文件：

salaryTable.js:

  return (
    <div className="w-full flex flex-col">
      <FuseScrollbars className="flex-grow overflow-x-auto">
        <Table stickyHeader className="min-w-xl" aria-labelledby="tableTitle">
          <ProductsTableHead
            selectedProductIds={selected}
            order={order}
            onSelectAllClick={handleSelectAllClick}
            onRequestSort={handleRequestSort}
            rowCount={data.length}
            onMenuItemClick={handleDeselect}
          />

          <TableBody>
            {_.orderBy(
              data,
              [
                (o) => {
                  switch (order.id) {
                    case "categories": {
                      return o.categories[0];
                    }
                    default: {
                      return o[order.id];
                    }
                  }
                },
              ],
              [order.direction]
            )
              .slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)
              .map((n) => {
                const isSelected = selected.indexOf(n.id) !== -1;
                return (
                  <TableRow
                    className="h-72 cursor-pointer"
                    hover
                    role="checkbox"
                    aria-checked={isSelected}
                    tabIndex={-1}
                    key={n.id}
                    selected={isSelected}
                    onClick={(event) => handleClick(n)}
                  >
                    <TableCell
                      className="w-40 md:w-64 text-center"
                      padding="none"
                    >
                      <Checkbox
                        checked={isSelected}
                        onClick={(event) => event.stopPropagation()}
                        onChange={(event) => handleCheck(event, n.id)}
                      />
                    </TableCell>

                    <TableCell
                      className="p-4 md:p-16"
                      component="th"
                      scope="row"
                    >
                      {n.user.name}
                    </TableCell>

                    <TableCell
                      className="p-4 md:p-16 truncate"
                      component="th"
                      scope="row"
                    >
                      {n.salary.amount}
                      <span>£S</span>
                    </TableCell>

                    <TableCell
                      className="p-4 md:p-16"
                      component="th"
                      scope="row"
                      align="left"
                    >
                      {n.salary.bonus}
                      <span>£S</span>
                    </TableCell>
                    {n.deductions.map((deduction) => {
                      <TableCell
                        // className="p-4 md:p-10"
                        component="th"
                        scope="row"
                        align="left"
                      >
                        {deduction.amount}
                        {/* <span>£S</span> */}
                        {/* <i
   className={clsx(
     "inline-block w-8 h-8 rounded mx-8",
     n.quantity <= 5 && "bg-red",
     n.quantity > 5 && n.quantity <= 25 && "bg-orange",
     n.quantity > 25 && "bg-green"
   )}
 /> */}
                      </TableCell>;
                    })}
                  </TableRow>
                );
              })}
          </TableBody>
        </Table>
      </FuseScrollbars>

      <TablePagination
        className="flex-shrink-0 border-t-1"
        component="div"
        count={data.length}
        rowsPerPage={rowsPerPage}
        page={page}
        backIconButtonProps={{
          "aria-label": "Previous Page",
        }}
        nextIconButtonProps={{
          "aria-label": "Next Page",
        }}
        onPageChange={handleChangePage}
        onRowsPerPageChange={handleChangeRowsPerPage}
      />
    </div>
  );

Answer 1

好像你在映射时没有返回任何东西，试试这个：

{
  n.deductions.map((deduction) => {
    return (
      <TableCell
        // className="p-4 md:p-10"
        component='th'
        scope='row'
        align='left'
      >
        {deduction.amount}
      </TableCell>
    );
  });
}

或者更好：

{
  n.deductions.map((deduction) => (
    <TableCell
      // className="p-4 md:p-10"
      component='th'
      scope='row'
      align='left'
    >
      {deduction.amount}
    </TableCell>
  ));
}

编辑：您可能想添加一个具有唯一值的 key 属性，这样 React 就不会生气。

ReactJs-Table-Array：在 table 中显示数组元素时缺少一个元素

ReactJs-Table-Array: An element is missing while displaying the elements of an array in a table

reactjs

material-ui

redux-toolkit