React 里为什么不建议用数组下标当 key？会导致什么问题？

key 在 React 里是“这个列表项是谁”的身份证。
用数组下标（index）当 key，一旦有插入、删除、排序，身份证就会“串号”。

会导致的问题：

1. 组件状态错位
   比如第 2 行输入框内容/勾选状态跑到别的行。

2. UI 交互异常
   光标跳动、输入中断、动画错位、展开/收起状态错乱。

3. 副作用绑定到错误项
   useEffect 订阅/清理可能对应错对象。

4. 性能变差
   React 不能正确复用节点，出现不必要重渲染或重挂载。

推荐做法：

• 用稳定且唯一的业务 ID（如数据库 id）当 key。
• 没有 ID 时，在“创建数据时”生成一次 ID，不要在渲染时临时生成。
• 只有“完全静态、不会增删改排”的列表，才勉强可用 index。