在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

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

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

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

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

附上代碼:
clipboard.png

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

回答
編輯回答
疚幼
  1. data 里面的每個(gè) item 加一個(gè) id 屬性,每次點(diǎn)擊 + 按鈕新添加一行時(shí),將該行對(duì)應(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是不行的吧,因?yàn)?在diff 之前 當(dāng)前的key 已經(jīng)刷新了吧
可以看看我的博客
利用 WeakMap 對(duì) Vue 新建數(shù)組中的對(duì)象賦予:key

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

在添加時(shí),給新加的對(duì)象上生成一個(gè)惟一的key,不要使用index.

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