Документы React говорят, что A “key” is a special string attribute you need to include when creating lists of elements.
Но я получаю предупреждение о ключах реагирования без рендеринга списка, и я не знаю почему.
У меня есть этот компонент с именем ExpandableCard.js
, который условно отображает дочерний заголовок:
// ExpandleCard return call
...
return <Card className={classes.expandableCard} classes={{ root: classes.cardRoot }}>
<div className={classes.cardHeader}>
{ props.header ? props.header : null }
<div className={classes.headerActions}>
{
expanded
? <KeyboardArrowUp onClick={() => { setExpanded(false) }} />
: <KeyboardArrowDown onClick={() => { setExpanded(true) }} />
}
{ props.editable && props.onRemove ? <Close onClick={props.onRemove} /> : null }
</div>
</div>
...
// renders children
<Card/>
Когда компонент отображается нормально с использованием композиции:
...
return <ExpandableCard header={<h4 className={c.cardTitle}>{t('record_summary.summary')}</h4>}>
{Object.keys(displayKeys).map((d, i) => {
return <DetailRow title={d} value={displayKeys[d]} key={i} />
})}
</ExpandableCard>
}
Я получаю предупреждение об ошибке реакции
react-dom.development.js:530 Warning: Each child in a list should have a unique "key" prop. See https://reactjs.org/docs/lists-and-keys.html for more information.
in div
in div (created by ForwardRef(Paper))
in ForwardRef(Paper) (created by WithStyles(ForwardRef(Paper)))
in WithStyles(ForwardRef(Paper)) (created by ForwardRef(Card))
in ForwardRef(Card) (created by WithStyles(ForwardRef(Card)))
...
Сначала я думал, что это ошибка в списке, который я рендерил с отображением дочерних элементов DetailRow, но я обнаружил, что когда Я сделал header
реквизит с ключом, ошибка исчезла:
return <ExpandableCard header={<h4 key={'header-for-record-summary'} ...
Почему бы реагировать, предупредите меня о ключах на элементе dom, который не не отображается в списке?