我不知道我在控制台中遇到的错误在哪里，一切看起来都很好，有人知道哪里可能出错了吗？
Unique key error
<TableBody>
{announcements.map((announcement) => (
<TableRow
key={announcement.id}
sx={{ '&:last-child td, &:last-child th': { border: 0 } }}
>
<TableCell align="left">
<Box display='flex' alignItems='center'>
<Avatar src={announcement.photoUrl} alt={announcement.announcementTitle}
style={{ height: 50, width: 50, marginRight: 20 }} />
<span>{announcement.announcementTitle}</span>
</Box>
</TableCell>
<TableCell align="right">
<Button onClick={() => handleSelectAnnouncement(announcement)} startIcon={<Edit />} />
<Button startIcon={<Delete />} color='error' />
</TableCell>
</TableRow>
))}
</TableBody>在更改为key={index}后，我得到了这个错误，但我仍然不知道是什么错误。数据库中只有6个ID字段，并且它不能在任何地方重复。
warning after update key
下面是一个到存储库的链接，因为有相当多的代码。
Last commit on GitHub
2条答案
按热度按时间kxxlusnw1#
这里很可能有一个重复的
announcement.id值，您可以像这样修复它使用索引作为key它将始终是唯一的：vc9ivgsu2#
您可能将某个
undefined或null值传递给键prop。检查是否每个公告对象都有stringid属性。但是，当数组来自数据库（或者在某个时候会发生变化）时，不建议使用数组索引作为唯一键。