javascript - React 在删除列表中间的项目时渲染错误的数据

Question

我有一个嵌套字段数组设置使用 react-hook-form here .请注意，我的实际代码要复杂一些，但问题在这里显示的是一样的。

我遇到的问题是，如果我删除列表中的一个项目，例如 ID: 2在列表中 [{ID:1}, {ID:2}, {ID:3}] ，结果不是 [{ID:1}, {ID:3}] ，而是 [{ID:1}, {ID:2}] .
这是official example ，它得到嵌套字段数组的权利。
据我所知，唯一的区别是我的表单依赖于从 API 检索的数据(在我的示例中，由 async 函数处理)，而官方示例使用已经启动的数据。
网上看样片，有些使用<Controller>字段，但这只是给我带来了更多问题(在我的实际代码中)，并且在测试时(在代码沙箱中)，并没有真正改变删除 2 不会将整个数组向上移动的事实。
有什么我想念的吗？

Answer 1

你 不应该 将数组索引传递为 key给 child 列表中的每个 child 。这是有问题的代码:

{fields.map((task, j) => {
  return (
    <Box key={j} padding={2} border={1}>
      {...}
    </Box>
  );
})}

当您运行上面的代码时，您将拥有像这样具有相应数据数组的 child

{ 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 开始，所以最后 key 之间存在不匹配和 task.id .
best way解决此问题的方法是直接使用模型中的唯一 ID 而不是数组索引作为 key :

{fields.map((task, j) => {
  return (
    <Box key={task.id} padding={2} border={1}>
      {...}
    </Box>
  );
})}

现场演示