React Material UI Table拆分行引发key重复警告的解决咨询

我想把表格设置成这样的样式：

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

表格显示正常，但控制台弹出警告：Warning: Each child in a list should have a unique "key" prop.。Material UI Table会把每个TableRow当成独立行，要是给两行用同一个key就会触发重复key的警告，怎么消除这个警告？

我的代码如下：

<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>

解决方法 #

问题出在你用<>（短语法Fragment）包裹两行TableRow，但Fragment本身没有设置唯一key，且两个TableRow需要各自的唯一标识。有两种可行的修复方式：

1. 给Fragment设置唯一key

把短语法Fragment换成完整的<React.Fragment>并绑定row.eventId作为key，这样整个逻辑行的容器有唯一标识，内部的TableRow可以不用额外设置key：

{rows && rows.map((row) => {
    return (
        <React.Fragment key={row.eventId}>
            <TableRow>
                <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>
        </React.Fragment>
    );
})}

2. 给每个TableRow设置唯一key

给第二个TableRow生成一个基于eventId的衍生key（比如${row.eventId}-desc），确保两个TableRow的key不重复：

{rows && rows.map((row) => {
    return (
        <>
            <TableRow key={`${row.eventId}-main`}>
                <TableCell>{row.eventId}</TableCell>
                <TableCell>{row.eventName}</TableCell>
                <TableCell>{row.eventDate}</TableCell>
                <TableCell>{row.location}</TableCell>
            </TableRow>
            <TableRow key={`${row.eventId}-desc`}>
                <TableCell colspan={4}>{row.description}</TableCell>
            </TableRow>
        </>
    );
})}

注意事项 #

• React列表中的每个直接子元素都需要唯一key，Fragment作为列表子元素时也必须遵循这个规则。
• 避免用数组索引作为key，除非列表不会发生排序、增删操作，否则可能导致组件渲染异常。这里使用eventId或其衍生值是安全的，因为eventId本身是事件的唯一标识。

内容的提问来源于stack exchange，提问作者Pat