React Todo应用点击顶部待办项时底部待办项也被触发点击问题
2026-10-5
问题根因
这是React列表渲染时key属性使用不规范导致的DOM节点异常复用问题。
具体原因
- 你渲染待办列表时应该是用了数组索引作为
key，甚至没有显式给列表项设置唯一key - 当你在激活筛选状态下修改任务1的完成状态后，激活列表的内容发生变化，不同待办项对应的数组索引出现错位，React的虚拟DOM diff逻辑会错误复用旧索引对应的DOM节点状态，就出现了点任务1、任务2复选框同步变化的问题
- 切换筛选条件再切回的操作会触发整个列表的强制重渲染，旧的复用DOM节点被销毁重建，问题暂时消失，但后续修改状态还会再次复现
修复方案
- 给每个待办项添加全局唯一的id属性，渲染列表时把
key设为待办的id值，不要用数组索引作为key - 修改待办完成状态时，通过id定位对应待办项修改，不要通过数组索引定位修改，避免状态和实际数据错位
内容的提问来源于stack exchange，提问作者Delta Five
相关产品推荐
相关产品推荐
