react通过操作数组实现动态删减组件时剩余组件的状态不保留问题解决（动态设置唯一key值的方法）

最新推荐文章于 2023-01-13 16:59:59 发布
原创 最新推荐文章于 2023-01-13 16:59:59 发布 · 558 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#javascript

问题：有一个公共组件A，其父组件B通过遍历数组来渲染A，动态增删数组就相当于动态增删组件A。问题是增删是交给用户来操作的，所以无法在开始给定一个固定key值。最开始是将index来作为key值，但是增删组件会让之前组件的key值也随之刷新，导致状态无法保留。
解决方案：
这里使用的是Date.now()作为唯一的key值：
在这里插入图片描述
但是有人提出如果两个用户同时操作的话也不能保证唯一性。
这里提供两种库来获得唯一的key值：分别是uuid和nanoid;其中uuid比较大，加载可能会慢些
Nano id的npm安装和使用
在这里插入图片描述
uuid的安装和使用：
在这里插入图片描述

前端面试汇总-React
构建数字世界的感官之桥 | 分享前端工程化、动效魔法与性能之舞！
06-29 1381
React并不是将click事件绑定到了div的真实DOM上，而是在document处监听了所有的事件，当事件发生并且冒泡到document处的时候，React将事件内容封装并交由真正的处理函数运行。这样的方式不仅仅减少了内存的消耗，还能在组件挂在销毁时统一订阅和移除事件。除此之外，冒泡到document上的事件也不是原生的浏览器事件，而是由react自己实现的合成事件（SyntheticEvent）。因此如果不想要是事件冒泡的话应该调用event.preventDefault()方法，而不是调用event
react常见面试题(持续更新)
最新发布
Mr.Wang开发日常
03-06 1347
受控组件的值是由React组件自身的state所控制的。这意味着表单元素的值不是直接由DOM维护，而是通过React组件的state来决定。每次用户输入时，都会触发一个事件处理器（如。
react+antd动态表单以及数组对象示例
feinifi的博客
07-31 1万+
在实际开发中，我们会遇到表单中有些数据项是多个，并不是普通的一个值，或者一组值，而是一个数组，比如联系人这一项，我们通常会有多个联系人，这时候，表单的设计会有些不一样。 先给出一个示例： 在react+antd中，我们需要注意的是，表单的数据表示需要根据数据项的数组长度来制作。我们不能像jQuery那样，在已经生成的dom文档中，通过append的方式或者remove的方式来增减dom中的结点。这里，我们需要借助数据模型，也就是状态的改变来改变dom结点，实现动态增加...
React Native之ScrollView通过map()方法动态加载数组
我是紫色紫色的专栏
04-06 1万+
大家好，时隔几天，我又开始更新新的博文了，最近由于有新的学习任务，比较头疼，加上刚刚过去的清明假期去长城锻炼身体了（微信公众号有彩蛋哦，欢迎关注），闲置了几天时间，所以今天赶紧的再来一发。上次写的关于ViewPaperAndroid这个控件的使用，大家反响很热烈，可以看出React Native现在已经越来越受到关注了，我最近学习的东西也是和RN有关，为了更好的管控RN中的state，这点以后再说，
从零开始学习React——(八)：React列表循环删除某项以及参数传递
qq_19249021的博客
01-11 1006
本节将介绍列表循环时删除其中某项 需求是这样的：点击已经有的选项时，可以进行删除。 1. 数组下标的传递 需要删除其中某项，那么首先就要知道当前点击项的index，也就是下标，然后绑定一个事件。代码如下： // 省略部分代码 <ul> { this.state.list.map((item, index) => { // 此处如果return后面只有一行的话就不需要写括号，如果需要换行就必须写括号 return ( <li ke.
vue页面报警告（Date.now()不能用作key）
黎小小的博客
01-13 1744
在页面循环操作后发现报错，本来以为时v-if导致，排查代码发现是因为:key使用了Date.now()，Date.now() 是毫秒，遇到重复的很正常。Date.now()是毫秒级别的 程序执行是微秒级的 所以一样是正常的。
列表增删写入唯一di
universe的博客
12-15 95
let arr = [ { name:"张三", key:1 }, { name:"李四", key:2 }, { name:"王五", key:3 }, { name:"赵六", key:4 }, ] // 先定义 length_template let length_template = arr.length; addArr function(){ let object = { name:".
react动态表单增减-自定义解决方案
qq_873366938的博客
01-04 1323
前端常用框架内有很多类似的功能可以直接使用，但往往都缺乏可控性 是否想过如何自己动手也实现也一个更加自定义，更加可控的类似组件呢 结合是业务-算法流程与数据管理控制，我们来手动造一个 功能 实现数据源的增删，输入数据的更新 流程梳理： 1.我们需要一个可以动态增删空行FORM的方法 2.我们需要知道我们在删除，及编辑的是哪一个 3.我们需要时刻保证编辑及回显的是当前行及当前顺序下的所有元素 构建一个TODOLIST class TodoList extends React.Component {
React之Arco组件：Message
zhao19958111的博客
09-02 920
本次阅读源码分析十分艰难，但也学习到不少知识，可能有不少错误希望指正。请注意，本文代码经过大量删减，源码请看相关连接。
原生动态化探讨与实现
马甲包开发审核交流群：869685378
04-24 962
现在随着大前端的流行，Native小程序，RN，等看似打着原生旗号的动态化，但开发过程中都会发现非常非常的像在写前端，各种 margin padding align 等，尤其是各大框架看起来都在反复提一个词 FlexBox ，于是我们深入的聊聊在移动端，动态化与跨平台这两个词的发展。 编译动态化 每一行代码本质上他就是一个字符串，他不具备任何的可运行的能力，之所以能被运行是因为他经过了一系列的...
vue中Date.now()做key重复问题
m15821038483的博客
04-22 2906
vue中Date.now()作key重复 Date.now()作为key值时提示重复： 原因：同一时间添加的一批临时数据，Date.now()取值重复 方法：临时数据定义一个即可，后续的方法添加避免同一时间 收获：思想开阔一些，分析出现原因，找到源头解决 ...
JavaScript的Date.now()方法怎么用？
m0_66316324的博客
01-11 2万+
JavaScript的Date.now()方法怎么用？
js Date 对象的学习总结
y627849093的博客
03-29 919
本文为转载  原文地址点击打开链接 js的时间戳获取方式有三种 var test1 = Date.parse(new Date());var test2 = (new Date()).valueOf(); var test3 = new Date().getTime();console.log(test1);console.log(test2);console.log(test3);
Javascript中的Date.now() 方法与Date.UTC() 方法 ，Date.parse() 方法
热门推荐
acoolgiser的博客
10-27 3万+
1.Date.now()方法返回自1970年1月1日 00:00:00 UTC到当前时间的毫秒数。 语法：无参数 var timeInMs = Date.now(); 描述： now()方法返回自1970年1月1日 00:00:00 UTC到当前时间的毫秒数，类型为Number。 因为 now() 是Date的一个静态函数，所以必须以 Date.now() 的形式来使用。 2....
react动态增加列表
wenmin1987的博客
08-11 6091
列表组件 class  TodoList  extends  React.Component{     render(){     return(       &lt;ul&gt;     {this.props.todos.map((todo,index)=&gt;{     &lt;li   key={index}&gt;{todo}&lt;/li&gt;  })    } ...
React动态加载组件
mmzzll2019的博客
04-14 1万+
查阅react的官网文档，发现两种方式： [[React.lazy](https://reactjs.org/docs/code-splitting.html#reactlazy)和 [loadable-components](https://github.com/smooth-code/loadable-components) ...
React 动态增加，删除，上下移动dom <li><td>
liuyuqin1991的专栏
12-19 2万+
思想在react的世界里，都是状态变更（数据变更）来驱动dom变化，动态添加dom不像以前用jquery一样append一个<li>或者一个<td> 这样了，而是通过装载<li> 或者<td> 数据数组[]来动态添加dom，下面的例子实现使用了antd的组件库 参考：https://ant.design/components/form-cn/#components-form-demo-dynami
react追加html元素,react向数组中如何追加数据
weixin_32771631的博客
06-02 1901
react向数组中如何追加数据发布时间：2020-12-04 11:23:27来源：亿速云阅读：179作者：小新这篇文章给大家分享的是有关react向数组中如何追加数据的内容。小编觉得挺实用的，因此分享给大家做个参考。一起跟随小编过来看看吧。首先渲染一个随机数，使其每间隔一秒变换一次。代码如下：数组追加元素class Xpf extends React.Component {constructor...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值