如何解决React表单中JavaScript映射输入行数据重叠显示错位问题

这是React列表渲染时key属性使用不当导致的典型问题：你在遍历生成表单条目时，应该是用了数组索引index作为key值。
React做虚拟DOM差异比对时，会通过key判断哪些DOM节点可以复用：当你过滤列表后，原本索引为0的条目消失，原索引为1的条目变为新的索引0，React识别到key还是0，就会直接复用原位置的input节点，不会更新input的显示值，最终就出现了数据实际正确、但视觉显示和条目不匹配的问题。

• 替换列表渲染的key值为每个条目专属的、不会随列表过滤/排序变化的唯一字段，比如API返回的条目ID、唯一业务编码，禁止用数组索引作为动态列表的key
  参考修改代码：

// 错误写法 ❌
{filteredList.map((item, index) => (
  <div key={index}>
    <span>{item.itemName}</span>
    <input 
      value={priceRecord[item.id] || ''} 
      onChange={(e) => updatePrice(item.id, e.target.value)} 
    />
  </div>
))

// 正确写法 ✅
{filteredList.map((item) => (
  <div key={item.id}> {/* 用条目自身的唯一ID作为key */}
    <span>{item.itemName}</span>
    <input 
      value={priceRecord[item.id] || ''} 
      onChange={(e) => updatePrice(item.id, e.target.value)} 
    />
  </div>
))

• 如果拉取的API数据没有自带唯一字段，可以在拿到接口返回结果时，统一给每个条目生成唯一标识存入对象中，不要在map渲染时实时生成唯一key，避免每次渲染都触发全量DOM重绘。

修改完成后，React会根据唯一key精准识别每个条目对应的DOM节点，过滤列表时会正确卸载消失条目的节点、渲染新显示条目的对应值，视觉显示就会和存储的数据完全一致。

内容的提问来源于stack exchange，提问作者Beulah Akindele