记一个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>
记一个react拖动排序中的坑:key的更多相关文章
- sort排序中的坑
问题的产生原因: 在一篇阿里面试题的跟帖中,很多人应用sort()方法对数组进行排序.看似合情合理的代码,运行结果却频频出错.为什么呢?因为很多人都忽略掉了一点,那就是sort()排序默认情况下是按A ...
- react项目构建中的坑—淘宝镜像安装后要设置
基本的搭建步骤参考博客:https://blog.csdn.net/qq_27727251/article/details/86593415 这里要强调的坑是:安装完淘宝镜像要将其设置为默认Regis ...
- 记一个VS连接过程中找不到cpp的解决方法
在新增几个qt页面时,发现原来没动的几个cpp 连接报错了,错误均是qt的相关文件找不到 应该是moc文件没有生产或者没有被包含进工程.我想着既然我没动,应该不会是moc的原因,就在其他方向解决了很久 ...
- Immutable.js 以及在 react+redux 项目中的实践
来自一位美团大牛的分享,相信可以帮助到你. 原文链接:https://juejin.im/post/5948985ea0bb9f006bed7472?utm_source=tuicool&ut ...
- Nancy总结(二)记一次Nancy 框架中遇到的坑
记一次Nancy 框架中遇到的坑 前几天,公司一个项目运行很久的Nancy框架的网站,遇到了一个很诡异的问题.Session 对象跳转到另外一个页面的时候,session对象被清空了,导致用户登录不上 ...
- 记一个常见的ms sql server中取第N条记录的方法
前言 好好学习,天天向上. 正文 好像也是一个不难的问题,刚视频里看到的,就记一下吧. 下面是表中原始的数据结构,做了一个倒叙排序: select * from Employee order by S ...
- 记一次SpringBoot 开发中所遇到的坑和解决方法
记一次SpringBoot 开发中所遇到的坑和解决方法 mybatis返回Integer为0,自动转型出现空指针异常 当我们使用Integer去接受数据库中表的数据,如果返回的数据中为0,那么Inte ...
- 隐藏 FastAdmin 列表中的拖动排序按钮
隐藏 FastAdmin 列表中的拖动排序按钮 就是以下这个按钮,想先删除不要. 刚开始在 CMS 插件中的栏目中发现没有,以为在哪个位置中,但找到半天的 weigh 都没有找到weigh 的字眼. ...
- [PHP] 算法-统计一个数字在排序数组中出现的次数的PHP实现
统计一个数字在排序数组中出现的次数. 1.有序的数组查找,使用二分法 2.二分法查找第一次出现的位置,二分法查找最后一次出现的位置,end - start +1 left=getLeft(data,k ...
随机推荐
- linux安装vmware出现kernel-header问题
查看日志文件, cat /tmp/vmware-xiuyuan/vmware-modconfig-9996.log | more在日志文件中有这么几行:Setting header path for ...
- Codeforces Round #524 (Div. 2) C. Masha and two friends 思路
题目:题目链接 思路:直接计数显然是不好处理的,但分情况讨论只要不写错这题是一定可以出的,但这样基本做完这个题就没时间做其他题了,但当时我就这么蠢的这样做了,比赛一个半小时的时候突然发现一个似乎可行的 ...
- KMP的正确使用法_x新疆网络赛Query on a string
Query on a string 题意,给定一个大字符串,给定一个小模式串,定义 两种不同的任务模式,分别是查询和更改: 查询对应区间内,有多少个匹配到位的数字: 修改某一位的某一个字母. 于是直觉 ...
- unity安装记录
官网直接下载(http://unity3d.com/cn/) 下载完后,会要求输入账号密码.我是先在官网进行一个账号注册,然后登陆即可. 首先会要你输入一个已有的邮箱,进行认证.进入自己邮箱,点击链接 ...
- python使用@property @x.setter @x.deleter
@property可以将python定义的函数“当做”属性访问,从而提供更加友好访问方式,但是有时候setter/deleter也是需要的. 1>只有@property表示只读. 2>同时 ...
- Redis实现之事件
事件 Redis服务器是一个事件驱动程序,服务器需要处理以下两类事情: 文件事件(file event):Redis服务器通过套接字与客户端(或者其他Redis服务器)进行连接,而文件事件就是服务器对 ...
- 洛谷P1328生活大爆炸版石头剪刀布
题目链接:https://www.luogu.org/problemnew/show/P1328
- 安卓手机关闭底部键盘灯的方法(htc G11亲测有效)
还在因为看电子书和看电影时键盘灯刺眼而苦恼吗?下面提供一个方法关闭键盘灯,让你轻松DIY! 1、手机必须先Root。使用RE管理器,按照这个路径,找到文件:brightness sys/devices ...
- xml文件的生成
关于android中自定义xml文件的生成,请看示例代码(主要来源于黑马教程): import java.io.File; import java.io.FileNotFoundException; ...
- Shell脚本编程
1.linux中的变量 linux中的变量分为环境变量和普通变量,其中环境变量可以理解为全局变量,在所有shell的子程序中都可以引用,普通变量只能在自己的shell程序中使用,程序结束后变量无法保留 ...