在做一个基于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的更多相关文章

  1. sort排序中的坑

    问题的产生原因: 在一篇阿里面试题的跟帖中,很多人应用sort()方法对数组进行排序.看似合情合理的代码,运行结果却频频出错.为什么呢?因为很多人都忽略掉了一点,那就是sort()排序默认情况下是按A ...

  2. react项目构建中的坑—淘宝镜像安装后要设置

    基本的搭建步骤参考博客:https://blog.csdn.net/qq_27727251/article/details/86593415 这里要强调的坑是:安装完淘宝镜像要将其设置为默认Regis ...

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

    在新增几个qt页面时,发现原来没动的几个cpp 连接报错了,错误均是qt的相关文件找不到 应该是moc文件没有生产或者没有被包含进工程.我想着既然我没动,应该不会是moc的原因,就在其他方向解决了很久 ...

  4. Immutable.js 以及在 react+redux 项目中的实践

    来自一位美团大牛的分享,相信可以帮助到你. 原文链接:https://juejin.im/post/5948985ea0bb9f006bed7472?utm_source=tuicool&ut ...

  5. Nancy总结(二)记一次Nancy 框架中遇到的坑

    记一次Nancy 框架中遇到的坑 前几天,公司一个项目运行很久的Nancy框架的网站,遇到了一个很诡异的问题.Session 对象跳转到另外一个页面的时候,session对象被清空了,导致用户登录不上 ...

  6. 记一个常见的ms sql server中取第N条记录的方法

    前言 好好学习,天天向上. 正文 好像也是一个不难的问题,刚视频里看到的,就记一下吧. 下面是表中原始的数据结构,做了一个倒叙排序: select * from Employee order by S ...

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

    记一次SpringBoot 开发中所遇到的坑和解决方法 mybatis返回Integer为0,自动转型出现空指针异常 当我们使用Integer去接受数据库中表的数据,如果返回的数据中为0,那么Inte ...

  8. 隐藏 FastAdmin 列表中的拖动排序按钮

    隐藏 FastAdmin 列表中的拖动排序按钮 就是以下这个按钮,想先删除不要. 刚开始在 CMS 插件中的栏目中发现没有,以为在哪个位置中,但找到半天的 weigh 都没有找到weigh 的字眼. ...

  9. [PHP] 算法-统计一个数字在排序数组中出现的次数的PHP实现

    统计一个数字在排序数组中出现的次数. 1.有序的数组查找,使用二分法 2.二分法查找第一次出现的位置,二分法查找最后一次出现的位置,end - start +1 left=getLeft(data,k ...

随机推荐

  1. HDU - 6514 Monitor(二维差分)

    题意 给定一个\(n×m\)的矩阵.(\(n×m <= 1e7\)). \(p\)次操作,每次可以在这个矩阵中覆盖一个矩形. \(q\)次询问,每次问一个矩形区域中,是否所有的点都被覆盖. 解析 ...

  2. HighCharts实现双Y轴

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.c ...

  3. IOS开发---菜鸟学习之路--(五)-MacBook购买前后感想

    前几天刚入手了一台MACBOOK AIR 13寸 13版的 这几天使用过来个人感觉还是非常不错的. 这几天每天晚上都抱着她玩到十一.二点. 今天晚上突然想起来好久没续写博客了.就连忙开始码字了. 此章 ...

  4. C++编程规范(101条准则)

    记录学习,方便以后查看.  2014-12-28 看完这本书,但是我做到的又有多少呢?确实有一部分 0 不要拘泥于小节 1 在高警告级别干净利落的进行编译,不放过任何警告 2 使用自动构建系统 3 使 ...

  5. java包、类、方法、属性、常量命名规则

    必须用英文,不要用汉语拼音 1:包(package):用于将完成不同功能的类分门别类,放在不同的目录(包)下,包的命名规则:将公司域名反转作为包名.比如www.sohu.com 对于包名:每个字母都需 ...

  6. Python基础-week07 Socket网络编程

    一 客户端/服务器架构 1.定义 又称为C/S架构,S 指的是Server(服务端软件),C指的是Client(客户端软件) 本章的中点就是教大写写一个c/s架构的软件,实现服务端软件和客户端软件基于 ...

  7. Halcon18 Linux For Armv7a 下载

    Halcon18 Linux For Armv7a 下载地址:http://www.211xun.com/download_page_16.html HALCON 18 是一套机器视觉图像处理库,由一 ...

  8. Java开发微信公众号(一)---初识微信公众号以及环境搭建

    ps:1.开发语言使用Java springMvc+Mybaits+spring maven实现 2.使用微信接口测试账号进行本地测试 https://mp.weixin.qq.com/debug/c ...

  9. 双网卡只有一个能ping通的解决办法

    来源:http://blog.csdn.net/centerpoint/article/details/38542719 Linux默认启用了反向路由检查 如果2个网卡在一个Lan里面,那么服务器可能 ...

  10. alpha(4/10)

    目录 摘要 团队部分 个人部分 摘要 队名:小白吃 组长博客:hjj 作业博客:冲刺4 团队部分 后敬甲 过去两天完成了哪些任务 文字描述 主页部分图标的替换 -拍照按钮的设计和测试 GitHub代码 ...