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

Answer 2

正如kind-user用户所说，您应该将密钥添加到包装标签中。键是唯一可以传递给的属性。

注意：将密钥传递给<>时，不能使用此简写形式。宁可使用

<React.Fragment key={yourKey}> 
... 
<React.Fragment>

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

2 个答案: