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

Posted 2020-12-27 axel10

在做一个基于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>