Ant Design 出现Warning: Each child in a list should have a unique “key“ prop.解决办法

错误内容有点多，这里就粘贴一点点，出现这个问题的原因很简单devScripts.js:6523 Warning: Each child in a list should have a unique "key" prop.Check the render method of `Cell`. See https://reactjs.org/link/warning-keys for more info

シ゛甜虾

9943人浏览 · 2021-10-27 14:16:33

シ゛甜虾 · 2021-10-27 14:16:33 发布

错误内容有点多，这里就粘贴一点点，出现这个问题的原因很简单

devScripts.js:6523 Warning: Each child in a list should have a unique "key" prop.

Check the render method of `Cell`. See https://reactjs.org/link/warning-keys for more information.
at a
at Cell (https://localhost:8000/mf-dep_vendors-node_modules_antd_es_alert_ErrorBoundary_js-node_modules_antd_es_alert_index_js-node_-26d7a0.76be8fff.async.js:4058:24)

就是创建的标签中key没有设置，然后就重复了，这里包括ProTable中的rowKey

rowkey重复的解决办法，就是返回的Dto数据中增加key字段int或string都行，key不重复就不会报错

标签key重复的解决办法，我这里用到了render，我的错误就来自于这个render，错误代码

{
  title: '操作',
  dataIndex: 'option',
  valueType: 'option',
  render: (_, record) => [<a onClick={() => handleEdit(record)}>{'配置'}</a>],
},

修改后代码，增加一个key={record.key}，确保代码生成的标签key不重复

{
  title: '操作',
  dataIndex: 'option',
  valueType: 'option',
  render: (_, record) => [
    <a onClick={() => handleEdit(record)} key={record.key}>
      {'配置'}
    </a>,
  ],
},