Javascript 当删除列表中间的项时，反应会产生错误的数据。

我有一个嵌套字段数组设置，使用

react hook form

。请注意，我的实际代码有点复杂，但问题仍然显示在这里

我遇到的问题是，如果我删除列表中的一个项目，比如说，在列表

[{ID:1}，{ID:2}，{ID:3}]

，结果不是

[{ID:1}，{ID:3}]

，而是

[{ID:1}，{ID:2}]

这是正确的嵌套字段数组

就我所知，唯一的区别是我的表单依赖于从API检索的数据（在我的示例中，由

async

函数处理），而官方示例使用的是已经启动的数据

在线查看示例，有些示例使用了

字段，但这只会给我带来更多问题（在我的实际代码中），并且在测试（在代码沙盒中）后，并没有真正改变删除2并不会使整个数组向上移动的事实

---

有什么我遗漏的吗？

您不应该将数组索引作为

键传递给子项列表中的每个子项。下面是有问题的代码：

{fields.map（（任务，j）=>{
返回(
{...}
);
})}

当您运行上面的代码时，您将有子级和相应的数据数组，如下所示

{ key: 0, task: { id: "1", freq: "d" },
{ key: 1, task: { id: "2", freq: "d" },
{ key: 2, task: { id: "3", freq: "d" },

{ key: 0, task: { id: "2", freq: "d" },
{ key: 1, task: { id: "3", freq: "d" },

如果在下一次渲染中删除第一项，数据数组将如下所示

{ key: 0, task: { id: "1", freq: "d" },
{ key: 1, task: { id: "2", freq: "d" },
{ key: 2, task: { id: "3", freq: "d" },

{ key: 0, task: { id: "2", freq: "d" },
{ key: 1, task: { id: "3", freq: "d" },

这是因为删除了
task.id=1
的第一项，但数组的索引仍然从
0
开始，因此最后
键与
task.id
之间存在不匹配

解决此问题的方法是直接使用模型中的唯一ID，而不是数组索引作为
键
：

{fields.map（（任务，j）=>{
返回(
{...}
);
})}

现场演示