使用 React Material UI Table 将详细信息行分散到 2 行会发出警告“警告：列表中的每个子项都应该有一个唯一的“key”属性。”

Question

我正在尝试将我的表格格式化为这样：

EVENT ID      EVENT NAME            DATE          LOCATION

12345678      Rolling Stones        01/01/2024    Merriweather Post Pavillion
Rain or shine! No weapons or alcohol will be permitted

12345679      Exorcist Believer     01/01/2024    Regal Cinemas
No one under the age of 18 will be admitted without a parent / legal guardian
       
12345680      Justin Beiber         01/01/2024    Regal Cinemas
All ages - 12 and up, no outside food or drinks permitted

虽然显示正常，但我收到警告“警告：列表中的每个子项都应该有一个唯一的“key”道具。”看起来 Material UI 表将每个 TableRow 解释为不同的行，而不是将它们评估为单个逻辑行并向两者分配相同的键值，这会引发重复键警告。

有人知道如何消除警告吗？

我的代码是：

<Paper className="paper">
    <TableContainer className="table-container">
        <Table>
            <TableHead>
                <TableRow>
                    <TableCell>
                        Event ID
                    </TableCell>
                    <TableCell>
                        Event Name
                    </TableCell>
                    <TableCell>
                        Date
                    </TableCell>
                    <TableCell>
                        Location
                    </TableCell>
                </TableRow>
            </TableHead>
            <TableBody>
                {rows && rows.map((row) => {
                    return (
                        <>
                            <TableRow key={row.eventId}>
                                <TableCell>
                                    <row.eventId}
                                </TableCell>
                                <TableCell>
                                    <row.eventName}
                                </TableCell>
                                <TableCell>
                                    <row.eventDate}
                                </TableCell>
                                <TableCell>
                                    <row.location}
                                </TableCell>
                            </TableRow>

                            <TableRow>
                                <TableCell colspan={4}>
                                    <row.description}
                                </TableCell>
                            </TableRow>
                        </>
                    );
                })}
            </TableBody>
        </Table>
    <TableContainer>
</Paper>

Answer 1

我找到了答案：

警告：列表中的每个孩子都应该有一个唯一的“关键”道具，但我有关键道具

我需要将 key 属性传递给 Fragment 标签而不是 TableRow 标签。

现在可以使用了。