React 在删除列表中间的项目时呈现错误的数据

Question

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

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

这是 official example，它获取嵌套字段数组。

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

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

有什么我遗漏的吗？

Answer 1

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

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

当你运行上面的代码时，你会得到 children 和这样的相应数据数组

{ 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.

解决此问题的是直接使用模型中的唯一 ID 而不是数组索引 key:

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

React renders the wrong data when deleting the item in the middle of the list