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

"本文讨论了在React应用中遇到的'Each child in a list should have a unique ""key"" prop.'警告,原因是缺少key属性导致的。解决方案是在创建的元素上设置唯一的key,例如在ProTable的rowKey中确保数据包含唯一key。示例中展示了如何在render方法中为a标签添加key={record.key}
摘要由CSDN通过智能技术生成

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

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>,
  ],
},
  • 6
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

花开花落的个人博客

你的鼓励是我最大的动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值