记一个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 ...
随机推荐
- PSTR、LPSTR等宏原型
1.首先介绍char.wchar_t ,宽字符wchar_t和窄字符char. 窄字符char了,大家都很清楚,就是8bit表示的byte,长度固定.char字符只能表示ASII码表中的256个字符, ...
- POJ 3370 Halloween treats(抽屉原理)
Halloween treats Every year there is the same problem at Halloween: Each neighbour is only willing t ...
- requests中文页面乱码解决方案【转】
requests中文页面乱码解决方案! 请给作者点赞 --> 原文链接 Python中文乱码,是一个很大的坑,自己不知道在这里遇到多少问题了.还好通过自己不断的总结,现在遇到乱码的情况越来越 ...
- 如何提高STM32的学习效率
时间如何安排 做任何事情前,习惯写一个计划——要在一个月内上手STM32! 没有计划的日子,每天早上醒来睁开眼睛,却不知道自己今天要干啥 计划和时间安排: 第一阶段:找感觉——谈及STM32,立即反应 ...
- 【读书笔记--cookie】JavaScript权威指南 第六版
遇到一些问题需要用cookie处理,正好读了一下犀牛书关于cookie的介绍,整理了一些笔记. cookie是指web浏览器存储的少量数据,同时它是与具体的web页面或者站点相关的. cookie数据 ...
- Github问题An error occurred trying to download
Github for windows安装过程出现了这样的问题An error occurred trying to download 'http://github-windows.s3.amazona ...
- hnust hold不住的老师
问题 H: Hold不住的老师 时间限制: 1 Sec 内存限制: 128 MB提交: 415 解决: 63[提交][状态][讨论版] 题目描述 因为我们学校ACM集训队取得的一个个优异成绩,AC ...
- PAT A+B格式
A + B格式(20) 时间限制 400毫秒 内存限制 65536 kB 代码长度限制 16000 B. 判断程序 标准 作者 陈,岳 计算a + b并以标准格式输出总和 - 即数字必须用逗号分隔成三 ...
- Java之implements
转自:https://blog.csdn.net/android_lover2014/article/details/52176814 JAVA中extends 与implements有啥区别?1. ...
- 【转】Unity3D 射线Ray实现点击拾取
游戏中经常会有鼠标移动到某个对象上来拾取它的功能,我们可以用Unity3D中的射线Ray实现这一效果.原理是在我们鼠标的位置,从屏幕射出一条射向世界空间的射线,当这条射线碰撞到我们需要拾取的对象时,我 ...