Material UI：如何将我的对象数组显示为 material ui table

Question

我有这个界面，通过这个界面我显示了一组值，很明显，我有一个“推导”，推导是一个数组，其中有一个、两个、三个或多个值, 从 table 中可以清楚地看出，大多数行都包含一个扣除值，但在 ID 号为 11 的第四行中，它包含两个扣除值，并且在这一行中很明显界面的形状已经改变并且变得不漂亮，我遇到的问题是如何在更好的字符串中显示推导矩阵（数字以逗号和无空格在彼此后面）而不会使行变坏

   {n.deductions.map((deduction) => (
                      <TableCell
                        key={deduction.id}
                        className="p-4  md:p-16"
                        component="th"
                        scope="row"
                        align="center"
                      >
                        <span>£</span>
                        {deduction.amount}
                      </TableCell>
                    ))}

这是扣除矩阵，我取数量显示出来

 "deductions": [
            {
                "id": 11,
                "receiptId": 11,
                "type": "loan",
                "amount": 7500,
                "reason": "You have took a holiday...",
                "createdAt": "2022-03-04T12:21:10.145Z",
                "updatedAt": "2022-03-04T12:21:10.145Z",
                "deletedAt": null
            },
            {
                "id": 12,
                "receiptId": 11,
                "type": "loan",
                "amount": 1000,
                "reason": "You have took a holiday...",
                "createdAt": "2022-03-04T12:21:10.145Z",
                "updatedAt": "2022-03-04T12:21:10.145Z",
                "deletedAt": null
            }
        ]

Answer 1

要以这种形式呈现数组：table 单元格内的 [7500, 1000] 试试这个：-

<TableCell
                        key={deduction.id}
                        className="p-4  md:p-16"
                        component="th"
                        scope="row"
                        align="center"
                      >
                        <span>£</span>
                        {deduction.amount[0] + "," + deduction.amount[1] }
                      </TableCell>

Answer 2

嗯，在这种情况下，您应该从对象数组中检索 'amount' 值。请尝试以下操作：

//in the template
{deduction.map(singleDeduction => singleDeduction.amount)}

前面的代码将 return 一个包含 'amount' 个值的数组。通常，打印数组时，javascript 会自动将数组转换为逗号分隔的字符串。如果这没有发生，只需在末尾添加 .join，如下所示：

{deduction.map((singleDeduction) => singleDeduction.amount).join(', ')}

此外，如果您想在每项扣除中添加“£”符号，请执行以下操作：

{deduction.map((singleDeduction) => "£" + singleDeduction.amount).join(', ')}

Material UI：如何将我的对象数组显示为 material ui table

Material UI: How to display my array of objects into a material ui table

reactjs

material-ui