排序后输入内容为什么串到别行

先理解原理和示例,再练习完整口述与追问。

同级稳定 key;业务身份。

列表排序改变了位置,但业务实体身份不变。index key 让实例身份跟位置绑定,局部草稿可能留在原位置;稳定业务 ID 让新旧节点正确对应。若数据本身被错误原地覆盖,修正 key 仍不能恢复正确记录,因此还要确认数据更新路径。

A、B 两行各输入不同草稿后交换顺序。如果 key 是 index,检查草稿是否随位置错位;改为记录 ID 后再测试删除首行、插入中间行和筛选。React 的 key 不作为普通 prop 传入,需要显式传 row.id;Vue 也应避免同级重复 key。

随机 key 会强制重建所有行,可能看似不串但导致输入丢失和性能变差。

先检查是否用 index 作为 key。排序后同一位置对应新业务对象,但框架可能复用旧实例,把其本地输入状态带过去。改成稳定业务 ID,并让表单值有明确归属。随机 key 会让每次都重建,虽然可能暂时掩盖串行,却带来失焦、状态丢失与性能问题。