React 列表里的 key={index}，居然比想象中还要坑 AI 生成 React 列表代码时经常能看到这种写法： {http://tasks.map… · @yunxi0623 · TwKit

@yunxi0623

React 列表里的 key={index}，居然比想象中还要坑 AI 生成 React 列表代码时经常能看到这种写法： {http://tasks.map((task, index) => ( <TaskRow key={index} task={task} /> ))} 代码能正常运行，页面也不一定报错 但只要列表支持删除、插入或者排序，就可能会出现很奇怪的状态错位 比如任务列表原本是 A、B、C，每个 TaskRow 都用 useState 保存输入框里的备注 你给 B 输入了一段备注，然后删除 A，此时 B、C 的位置都变了，但 React 仍可能按照原来的索引复用组件，导致 B 的备注丢失，原本属于 B 的内容却出现在 C 上 其实原因很简单，索引代表的是位置，不是任务本身的身份 这类问题往往不是输入框的 onChange 写错了，而是 React 没有正确识别哪一行对应哪条数据 让 AI 给你修复也很简单，但有两个细节也不能忽略 如果任务数据本身有稳定的 id，直接这样写： {http://tasks.map(task => ( <TaskRow key={http://task.id} task={task} /> ))} React 就能在列表调整顺序时，通过 id 识别对应组件，尽量保留属于该任务的本地状态 如果数据没有 ID，建议在创建数据时生成并保存，而不是每次渲染时调用 Math.random() 或 crypto.randomUUID() 生成新的 key 否则组件可能反复重新挂载，输入内容也会丢失 可以这样验证修复后效果： 给 A、B 两行分别输入不同内容，然后删除 A、交换顺序，再检查输入内容是否仍跟着正确的任务走 当然，完全静态、不会增删或排序的列表，使用索引通常没有问题

曝光 47 · 评论 0 · 点赞 1 · 书签 0