对警告键做出反应，但没有列表或提示。地图

Question

React文档说，"key"是一个特殊的字符串属性，在创建元素列表时需要包含。

但是我在没有渲染列表的情况下得到了反应键警告，我不知道为什么。

我有这个组件称为展开Card.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子级映射呈现的列表的错误，但我发现，当我使用键呈现标题道具时，错误消失了：

返回

为什么会反应警告我关于不映射到列表中的dom元素上的键？




Answer 1

因此，我发现我的问题在于在开发环境中启用@babel/plugin transform-react内联元素。

通过将其更改为仅在生产中启用，我的错误消失了：

module.exports = {
  plugins: [...],
  presets: [...],
  env: {
    production: {
      plugins: [
        '@babel/plugin-transform-react-inline-elements'
      ]
    }
  }
}

根据巴贝尔关于插件的文档：

此转换只应在生产环境中启用（例如，在缩小代码之前），因为尽管它可以提高运行时性能，但它会使警告消息更加隐晦，并跳过开发模式中发生的重要检查，包括proptype。