react给节点添加key值不生效

Question

效果描述:每次添加+按钮可以新添加一行新列,点击后面的×可以删除该行.

问题描述:每次从数组中删除该行的时候,都默认是从最后一个开始删.

附上代码:

原因分析:react的diff算法需要给节点添加key值才会分别认识不同的节点,所以给节点添加key值.
结果:添加Key值仍然无效.

Answer 1

index是不行的吧，因为 在diff 之前 当前的key 已经刷新了吧
可以看看我的博客
利用 WeakMap 对 Vue 新建数组中的对象赋予:key

Answer 2

在添加时，给新加的对象上生成一个惟一的key,不要使用index.

{key: Date.now()}

Answer 3

1. 给 data 里面的每个 item 加一个 id 属性，每次点击 + 按钮新添加一行时，将该行对应的 item 的 id 设置为 Date.now();
2. 将 <div key={String(index*44)}> 改为 <div key={item.id}>;
3. 将 <InputNumber key={String(index*34)}> 改为 <InputNumber>（不要key）。