React-Warning-Keys без списка или .map - PullRequest
0 голосов
/ 14 февраля 2020

Документы 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, который не не отображается в списке?

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...