reactjs - 反应错误:列表中的每个孩子都应该有一个唯一的关键道具
问题描述
以下有什么问题:
<List>
{sections.map(section => (
<>
{section.header && <ListSubheader key={section.header}>{section.header}</ListSubheader>}
{section.items
.filter(item => new RegExp(itemsFilter, 'i').test(item.value))
.map(item => {
const labelId = `multi-select-filter-list-checkbox-label-${item.key}`;
return (
<ListItem key={item.key} role={undefined} dense button onClick={handleToggle(item)}>
<ListItemIcon>
<Checkbox
className={checkboxClasses.root}
edge="start"
checked={checked.indexOf(item) !== -1}
tabIndex={-1}
disableRipple
color="primary"
inputProps={{ 'aria-labelledby': labelId }}
/>
</ListItemIcon>
<ListItemText
id={labelId}
primary={item.value}
primaryTypographyProps={{
variant: 'body1'
}}
/>
</ListItem>
);
})
}
</>
))}
</List>
我相信我正在提供钥匙;错误在哪里?
解决方案
key
应该为包装标签提供道具。
替换<>
为<React.Fragment>
并对其应用密钥。
<React.Fragment key={section.header}>
推荐阅读
- java - 如何在连接表上构建 JPQL 查询?
- java - Java,打印列表中两个元素之和的代码不起作用
- r - 在基本 R 中对同一数据集执行相同操作时偶尔会出现数值问题
- arduino - 调用“”(Arduino)没有匹配的功能
- vue.js - babel.config.js babel eslint 关闭/禁用规则
- kotlin - MPAndroidChart,关于最大实际值的轴刻度
- go - 如何为服务器和事件句柄设计带有单独包的事件驱动 API?
- azure-active-directory - 图形 API(Http 状态:412 前提条件失败 - ErrorIrresolvableConflict)
- html - 如何基于另一个 html 页面建立一个 html 页面?
- android - 在 Raspberry Pi 3 Model B 上具有空活动的 Android Things 项目