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

我有一个嵌套字段数组设置使用react-hook-form here https://codesandbox.io/s/compassionate-galileo-nkz71。请注意，我的实际代码有点复杂，但问题在这里显示是一样的。

我遇到的问题是，如果我删除列表中的一个项目，例如，ID: 2在列表中[{ID:1}, {ID:2}, {ID:3}]，结果不是[{ID:1}, {ID:3}]， 但反而，[{ID:1}, {ID:2}].

这是官方示例 https://codesandbox.io/s/react-hook-form-usefieldarray-nested-arrays-x7btr?file=/src/index.js:174-187，它可以正确获取嵌套字段数组。

据我所知，唯一的区别是我的表单依赖于从 API 检索的数据（在我的示例中，由 API 处理）async函数），而官方示例使用已经启动的数据。

在网上查看示例，有些使用<Controller>字段，但这只是给了我更多问题（在我的实际代码中），并且经过测试（在代码沙箱中），并没有真正改变删除 2 不会将整个数组向上移动的事实。

我有什么遗漏的吗？

You 不应该将数组索引传递为key给孩子列表中的每个孩子。这是有问题的代码：

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

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

{ 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 and task.id.

The best way https://stackoverflow.com/a/43892905/9449426要解决此问题，请直接使用模型中的唯一 ID，而不是数组索引，如下所示key:

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

现场演示