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

Question

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

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

这是官方示例，它正确获取嵌套字段数组。

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

查看在线示例，有些人利用了该<Controller>领域，但这只是给我带来了更多问题（在我的实际代码中），并且在测试时（在代码沙盒中），并没有真正改变删除 2 不会改变整个阵列起来。

有什么我想念的吗？

Answer 1

您不应该将数组索引传递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" },

这是因为第一项 wheretask.id = 1被删除了，但数组的索引仍然是从开始0，所以最终key和之间存在不匹配task.id。

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

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

现场演示