删除列表第二条后下面每一行的输入框内容和勾选状态整体上移,最后一行重复上一条的数据,控制台偶尔刷 Warning: Encountered two children with the same key, `1`。日志里能对上时间点,这种反而好排。
key 用了数组下标,删除中间项后后面元素的下标全部前移,框架按 key 复用组件,输入框里的本地状态就留在了错位的那一行数据上。这一点先确认清楚,后面就不用反复试。
items.map(item => <Row key={item.id} data={item} />)
const item = { id: crypto.randomUUID(), name };
围绕「列表 key 索引」排查时,命令行跑一遍比在面板里点十次有用,面板会替你做掉不少隐式操作。偶发问题先统计频率,一小时几次和一天一次,查法完全不同。
处理上按这个顺序:渲染时改用数据自身的唯一 id 作为 key,不要用循环下标;新增数据时先分配稳定 id 再插入列表,避免顺序变化后复用错位;删除后检查剩余项状态是否跟着各自数据走,而不是跟着位置走。
结果对不对很好判断,删除中间一行后各行输入内容留在原数据上,控制台不再出现重复 key 警告。
