javascript - React 在删除列表中间的项目时渲染错误的数据
问题描述
我在react-hook-form
这里有一个嵌套字段数组设置使用。请注意,我的实际代码要复杂一些,但问题在这里显示的是一样的。
我遇到的问题是,如果我删除列表中的一个项目,比如ID: 2
在 list 中[{ID:1}, {ID:2}, {ID:3}]
,结果不是[{ID:1}, {ID:3}]
,而是[{ID:1}, {ID:2}]
.
这是官方示例,它正确地获取了嵌套字段数组。
据我所知,唯一的区别是我的表单依赖于从 API 检索的数据(在我的示例中,由async
函数处理),而官方示例使用已经启动的数据。
在线查看示例,有些使用该<Controller>
字段,但这只是给我带来了更多问题(在我的实际代码中),并且在测试时(在代码沙箱中),并没有真正改变删除 2 不会改变整个阵列起来。
有什么我想念的吗?
解决方案
您不应该将数组索引传递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
:
{fields.map((task, j) => {
return (
<Box key={task.id} padding={2} border={1}>
{...}
</Box>
);
})}
现场演示
推荐阅读
- css - Angular 6:如何动态更改页面背景颜色
- odbc - Firebird ODBC 连接(64 位)因“未定义用户名和密码”而失败
- debian - 如何在 Debian 上强制进行内核更新
- docker - 如何使用 docker-composer 连接 php 和 composer 镜像?
- ios - 我如何向 CALayer() 添加模糊颜色?
- python-3.x - Python中的错误“其他元素将收到点击”
- python - 每 12 小时计算所有列的平均值
- postman - 在哪里可以找到变量 POSTMAN 的实际值?
- javascript - Multi Stage BPF - 如何知道我正在转移到另一个实体?
- objective-c - 在 myproject-swift.h 中找不到接口声明