React动态表单输入项删除失效、重渲染数据丢失问题解决

问题触发的核心原因 #

三个异常本质是同一个动态列表管理逻辑踩了React的通用反模式，典型错误写法的组合是：

• 渲染列表时直接用数组索引当key，没有给每一行绑定全局唯一的稳定标识
• 点击删除时直接传数组索引做过滤删除操作
• 输入框的填写值存在行组件的局部状态里，没有和行的唯一标识做绑定
  这三个写法叠加后，就会依次出现：删除节点错位、重渲染时DOM复用导致输入值丢失、点击删除后剩余行的输入值被连带清空的问题。

具体落地修复步骤 #

• 重构列表的顶层状态存储结构，每一条规则项挂载全局唯一的不重复id，初始4个默认项、动态新增的项都在创建时直接生成唯一标识（可以用自增计数器、crypto.randomUUID()，不要用数组索引当id），状态内同时存储每一行的输入值，不要把输入值存在行组件的局部状态里，示例结构：

  // 组件顶层的状态定义
  const [ruleList, setRuleList] = useState(() => {
    // 初始化4个默认规则项，每项带唯一id和空的输入值
    return Array.from({length:4}, () => ({
      id: generateUniqueId(), // 自定义的id生成逻辑
      inputValue: ''
    }))
  })
  

• 实现精准的删除逻辑：删除操作不要依赖数组索引，直接接收被点击行的唯一id，通过id做过滤移除对应项，示例：

  const handleDeleteRow = (targetRowId) => {
    // 基于id过滤，完全不依赖当前数组的索引位置
    setRuleList(prevList => prevList.filter(item => item.id !== targetRowId))
  }
  

• 列表渲染时，把每一行的key绑定为自身的唯一id，绝对不要用数组索引当key，从根源上避免React DOM节点复用错位的问题，示例：

  <div className="form-container">
    {ruleList.map(row => (
      <RuleInputRow 
        key={row.id} // 用行自身的id当key，不用index
        rowData={row}
        onDelete={() => handleDeleteRow(row.id)}
        onInputChange={(newVal) => updateRowValue(row.id, newVal)}
      />
    ))}
  </div>
  

• 实现输入值的全链路受控，保证重渲染不丢值：把每一行的输入框设置为完全受控组件，输入值直接绑定全局状态里对应id的inputValue字段，输入变更时直接更新全局状态对应项的值，不要在RuleInputRow组件内部用局部state存输入内容，示例：

  const updateRowValue = (targetRowId, newVal) => {
    setRuleList(prevList => prevList.map(item => 
      item.id === targetRowId ? { ...item, inputValue: newVal } : item
    ))
  }
  

• 可选增强：如果需要页面刷新后保留已填写的输入内容，可以在状态更新时把ruleList同步写入localStorage，组件初始化时从localStorage读取历史数据，避免刷新后内容丢失。

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