反应错误：列表中的每个孩子都应该有一个唯一的键道具

Question

以下内容有什么问题：

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

我相信我会提供钥匙；错误在哪里？

Answer 1

该key道具应提供包装标签。

替换<>为<React.Fragment>并对其应用密钥。

<React.Fragment key={section.header}>