記一個react拖動排序中的坑：key

標籤：使用   oda   順序   dash   dex   span   問題   方案   unique   

在做一個基於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