Table警告：Each child in a list should have a unique “key“ prop

bulucc

已于 2023-02-21 14:24:28 修改

阅读量1.2k

点赞数 1

分类专栏：日常积累文章标签：前端 javascript html

于 2023-02-12 20:32:22 首次发布

本文链接：https://blog.csdn.net/bulucc/article/details/128999259

版权

日常积累专栏收录该内容

13 篇文章 1 订阅

订阅专栏

文章主要讨论了在React中遇到的关于列表子项缺少唯一`key`属性的警告，指出问题出在`Body`组件的渲染方法上。解决方案是为`Table`组件添加`rowKey`属性，可以使用记录的`id`作为唯一标识，如果`id`不唯一，则可考虑使用`index`或随机数。但需要注意，`index`和基于时间戳的随机数在数据更新时可能不可靠。

摘要由CSDN通过智能技术生成

问题描述

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

Check the render method of `Body`. See https://reactjs.org/link/warning-keys for more information.
    at BodyRow (http://**:8000/umi.js:392823:25)
    in Body (created by Table)
    in table (created by Table)
    in div (created by Table)
    in div (created by Table)

问题截图

问题分析

Check the render method of 'Body'.，Table 组件没有加 rowKey 导致

问题解决

// 为 rowKey 属性赋值
<Table dataSource={data} rowKey={(record) => record.id}>
// ...
</Table>

问题消失 nice～

附：如果id不能保证唯一，可以使用index，或者随机数 // 注意更新时不可用

# index 使用方式
index.toString()

# 随机生成数方式：
# 1.JavaScript random() 方法
# Math.random()：返回介于 0（包含） ~ 1（不包含） 之间的一个随机数

Math.random()

# 2.JavaScript round() 方法
# Math.round(数值)：round() :返回最接近的整数

Math.round(20.69)

js时间戳 // 注意更新时不可用

# JavaScript 获取当前时间戳：
# 第一种方法：
var timestamp = Date.parse(new Date());
# 结果：1676528656013000

# 第二种方法：
var timestamp = (new Date()).valueOf();
# 结果：1676528656013

# 第三种方法：
var timestamp=new Date().getTime()；
# 结果：1676528656013