记一个react拖动排序中的坑:key

在做一个基于react的应用的时候遇到了对列表拖动排序的需求。当使用sortable对列表添加排序支持后发现一个问题:数据正确排序了,但是dom的顺序却乱了,找了一会儿原因后发现是因为在渲染数据的时候指定了一个动态的key(map((o,i)=>(<li key={i}></li>))),导致了dom顺序混乱。解决方案有:将数据装入模型的时候生成一个不重复的key,或者使用lodash的uniqueId:

import uniqueId from ‘lodash/uniqueId‘

在指定key的时候调一下:

 <li data={photo} key={uniqueId()} index={j}></li>

原文地址:https://www.cnblogs.com/axel10/p/9403794.html

时间: 2024-10-22 04:13:18

记一个react拖动排序中的坑:key的相关文章

记一个在训练模型过程中自己给自己挖的坑

根据一个图像拼接和融合的需求,训练一个模型,输入为一组图像,输出为一张图像,输入数据和ground truth的像素值都归一化到[-1, 1] 我当时使用了UNet结构,卷积和反卷积都单独封装了一个函数,方便调用,在函数内部,卷积都会默认接一relu激活层 训练结果出来后,发现内容基本都能和ground truth对应上,但是颜色很怪异,特别接近灰色,如下 然后寻找原因许久未果,陷入纠结.第二天开始思考修改网络,猛然发现,我希望最后一层的输出为[-1, 1],但最后一层卷积默认接了relu激活层

sort排序中的坑

问题的产生原因: 在一篇阿里面试题的跟帖中,很多人应用sort()方法对数组进行排序.看似合情合理的代码,运行结果却频频出错.为什么呢?因为很多人都忽略掉了一点,那就是sort()排序默认情况下是按ASCII字母顺序排序的,而并不是按照我们想当然的数字大小排序. 问题的产生: 比如我们利用sort()对数组[-12,3,6,5,100]进行升序排列,那么结果是什么呢?[-12,100,3,5,6].对数组[-12,10,3,6,5]进行升序排列呢?答案是[-12,10,3,5,6].对数组[-1

记一个VS连接过程中找不到cpp的解决方法

在新增几个qt页面时,发现原来没动的几个cpp 连接报错了,错误均是qt的相关文件找不到 应该是moc文件没有生产或者没有被包含进工程.我想着既然我没动,应该不会是moc的原因,就在其他方向解决了很久也没解决 然后在vs文件管理器搜相关moc文件,缺失没有,这就很奇怪了. 我的方法是,用记事本格式打开工程的.vcxproj文件,跟之前的一对比.发现缺失有几个cpp的命令行被改掉了.这个如果用vs的可视化界面,很难直观的看到哪个变动了 于是把这几个cpp文件删除再添加,就可以了 原文地址:http

记一次Nancy 框架中遇到的坑

记一次Nancy 框架中遇到的坑 前几天,公司一个项目运行很久的Nancy框架的网站,遇到了一个很诡异的问题.Session 对象跳转到另外一个页面的时候,session对象被清空了,导致用户登录不上.搞了两天,终于解决了.于是把它记录下来,以避免其他人也碰到这种情况. 起因 公司一个Nancy 框架 开发的web网站,以前一直都是好的,nancy 框架也用在了很多项目里面,基本上已经很成熟很稳定了,但是在前几天发布某个web网站的时候,竟然出现部分用户登录不上的情况.刚开始以为是人员的权限有问

记一次SpringBoot 开发中所遇到的坑和解决方法

记一次SpringBoot 开发中所遇到的坑和解决方法 mybatis返回Integer为0,自动转型包空指针异常 当我们使用Integer去接受数据库中表的数据,如果返回的数据中为0,那么Integer便为null,这时候将Interger自动转型为int,则会出现空指针异常 这个时候,我们可以在Service层对Integer的数据进行判断,如果为空,就把它复制为0 // 在pojo中,如果Integer canJoinNun为null 就把值设置为0 if (publishMsg.getC

jdk1.7的sort排序之Comparator中的坑

之前说过,java1.7开始,当数组长度多余32的时候,使用Timsort排序(https://www.cnblogs.com/fbw-gxy/p/7598151.html) 然后最近开发中遇到类似下图中的代码导致报错: a.stream().sorted((k1,k2)->{ if(k1<k2){ return -1; } return 1; }).collect(Collectors.toList()); 一眼看过去,不就是由于compare方法没满足自反性,传递性,和对称性导致了bug么

输入6个人的成绩放入到一个一维数组中,然后打印出平均分,最后按成绩 从大到小打印。三个功能(输入是一个函数,求平均分是一个函数,排序是一个 函数)都用函数实现,最后在main方法中调用。

/*5.输入6个人的成绩放入到一个一维数组中,然后打印出平均分,最后按成绩从大到小打印.三个功能(输入是一个函数,求平均分是一个函数,排序是一个函数)都用函数实现,最后在main方法中调用.*/ #include <stdio.h> int inputScore(){ int score; scanf("%d",&score); return score;} double avg(int scores[],int length){ int i,score = 0;

【c语言】统计一个数字在排序数组中出现的次数

// 题目:统计一个数字在排序数组中出现的次数. //  比如:排序数组{1.2,3,3,3,3,4.5}和数字3,因为3出现了4次.因此输出4 有一种最简单的算法,遍历.可是有比它效率更高的 先看遍历: #include <stdio.h> #include <assert.h> int num_time(int *arr, int len, int a) { int i = 0; int count = 0; assert(arr != NULL); for (; i <

php如何实现统计一个数字在排序数组中出现的次数(代码)

统计一个数字在排序数组中出现的次数. 博客 www.51msk.cn 1.有序的数组查找,使用二分法2.二分法查找第一次出现的位置,二分法查找最后一次出现的位置,end - start +1 left=getLeft(data,k) right=getRight(data,k) retun right-left+1 getLeft data,k left=0 right=arr.length-1 mid=left+(right-left)/2 while left<=right if arr[m