鍍金池/ 問答/HTML5  HTML/ react給節(jié)點添加key值不生效

react給節(jié)點添加key值不生效

效果描述:每次添加+按鈕可以新添加一行新列,點擊后面的×可以刪除該行.

clipboard.png
問題描述:每次從數(shù)組中刪除該行的時候,都默認(rèn)是從最后一個開始刪.

附上代碼:
clipboard.png

原因分析:react的diff算法需要給節(jié)點添加key值才會分別認(rèn)識不同的節(jié)點,所以給節(jié)點添加key值.
結(jié)果:添加Key值仍然無效.

回答
編輯回答
疚幼
  1. data 里面的每個 item 加一個 id 屬性,每次點擊 + 按鈕新添加一行時,將該行對應(yīng)的 itemid 設(shè)置為 Date.now();
  2. <div key={String(index*44)}> 改為 <div key={item.id}>;
  3. <InputNumber key={String(index*34)}> 改為 <InputNumber>(不要key)。
2018年5月2日 22:59
編輯回答
掛念你

index是不行的吧,因為 在diff 之前 當(dāng)前的key 已經(jīng)刷新了吧
可以看看我的博客
利用 WeakMap 對 Vue 新建數(shù)組中的對象賦予:key

2017年2月17日 23:06
編輯回答
失魂人

在添加時,給新加的對象上生成一個惟一的key,不要使用index.

{key: Date.now()}
2017年4月10日 13:15