动态表单增删改查，数据with new，UI不是antd with React的new

Question

我卡在这种情况下，用React和antd，想做一个动态增删改查的表单。下面的link，我做了一个demo来描述这个问题。

https://codesandbox.io/s/1r51yy68r4

重现步骤

• 添加两个或三个记录
• 分别为每条记录添加数据（下拉选择）
• 删除任何非最后的数据
• 想删的还在

在控制台中，数据被正确删除，但是UI呈现错误

重现gif：

重现控制台信息：

Answer 1

您似乎遇到了问题，因为在第 120 行创建的 div 中有重复的键值。

在 handleSelect 函数中，您将下拉列表中的值重新用作汽车的 ID。

要解决此问题，您可以向您的汽车对象添加另一个 属性 来存储 ID，并创建一个唯一键用作 ID。

needUpdatedItem.id = v4();
needUpdatedItem.selectionId = value;
needUpdatedItem.name = fieldNameValue;