React动态表单新增字段后删除失效、删除后字段报错排查

现存问题 #

• 新增字段后，点击删除按钮无法准确删除对应字段
• 删除部分字段后触发表单渲染报错

原实现代码 #

import React from "react";
import {useState , useEffect} from "react";
import ReactDOM  from "react-dom";
import "./index.css";


const Form = () =>{
  const [fieldsLength, fieldsLengthChanger] = useState(1);
  const [fields, fieldsChanger] = useState([{
    id : 1,
    name: "",
    phone: "",
    age: ""
  }])



  return  (
    <>
      <div className="form__wrapper">
        <h2>Form </h2>
        {
          fields.map((elem, index) => {
            return(
              <FormElement {...elem} fields={fields} fieldsChanger={fieldsChanger} fieldsLength={fieldsLength} fieldsLengthChanger={fieldsLengthChanger}/>
            )
          })
        }
        <AddMore fieldsLength={fieldsLength} fieldsLengthChanger={fieldsLengthChanger} fields={fields} fieldsChanger={fieldsChanger}/>
      </div>
    </>
  )
}


const FormElement = ({fieldsLength  ,...props}) =>{

  function inputHandler(e, id){
    console.log(e.target.name);
    const values = [...props.fields];
    values[id-1][e.target.name] = e.target.value;
    props.fieldsChanger(values);
  }

  function removeElement(e,id){
    e.preventDefault();
    var arr = [...props.fields];
    const newArray = arr.filter(function(elem,index){
      console.log("index:" , index, "ID : ", id);
      if (index + 1 != id){
        return elem;
      }
    });
    props.fieldsChanger([])
    props.fieldsChanger(newArray);

    
  }

  return (
    <div className="group__form">
      <div className="form__element">
        <input type="text" value={props.fields.name} name="name" onChange={e => inputHandler(e , props.id)} />
      </div>
      <div className="form__element">
        <input type="text" value={props.fields.phone} name="phone" onChange={e => inputHandler(e , props.id)}/>
      </div>
      <div className="form__element">
        <input type="text" value={props.fields.age} name="age" onChange={e => inputHandler(e , props.id)}/>
      </div>
      {
        fieldsLength > 1 ? <div className="remove__field">
          <a href="#" onClick={e=>removeElement(e , props.id)}>Remove</a>
        </div> : ""
      }
    </div>
  )
}
const AddMore = (props) =>{
  function addMore(){
    props.fieldsLengthChanger(props.fields.length + 1);
    props.fieldsChanger([...props.fields, {id:props.fields.length + 1 , name: "" , phone : "" , age :''} ]);
    
  }
  return (
    <div className="add__more">
      <a href="#" onClick={e=> addMore()}>Add element</a>
    </div>
  )
}


ReactDOM.render(<Form/> , document.getElementById("root"));

错误根因 #

1. 输入框值绑定错误：FormElement里的inputvalue绑定的是props.fields.name/props.fields.phone/props.fields.age，但props.fields是整个表单字段数组，不是当前字段对象，数组本身没有这些属性，直接取值为undefined，触发React受控组件报错。
2. 索引与ID强绑定逻辑失效：输入更新、删除逻辑都用id-1作为数组索引定位元素，但删除元素后剩余元素ID不连续（比如删了ID=2的元素，剩下ID=1、ID=3，ID=3的元素实际索引是1，id-1=2超出数组长度），会出现定位不到元素、给undefined赋值的报错，同时删除匹配逻辑index+1 != id也会失效，导致删错/删不掉元素。
3. 冗余状态不同步：单独维护fieldsLength状态，和fields.length天然存在不同步风险，删除元素后没有同步更新fieldsLength，会导致删除按钮显示逻辑异常。
4. 列表缺少唯一key：map渲染表单组时没有加唯一key属性，React虚拟DOM diff会出现渲染错乱。
5. 无意义重复赋值：删除时先执行props.fieldsChanger([])再赋值新数组，会触发一次空数组的无效渲染，额外增加性能开销。

修复后代码 #

import React from "react";
import { useState } from "react";
import ReactDOM  from "react-dom";
import "./index.css";

const Form = () =>{
  // 移除冗余的fieldsLength状态，直接用fields.length获取字段数
  const [fields, fieldsChanger] = useState([{
    id : 1,
    name: "",
    phone: "",
    age: ""
  }])

  return  (
    <div className="form__wrapper">
      <h2>Form </h2>
      {
        fields.map((elem) => {
          // 用唯一id作为key，不要用index
          return(
            <FormElement 
              key={elem.id}
              {...elem} 
              fields={fields} 
              fieldsChanger={fieldsChanger}
            />
          )
        })
      }
      <AddMore fields={fields} fieldsChanger={fieldsChanger}/>
    </div>
  )
}


const FormElement = (props) =>{
  // 直接用当前元素的id匹配，不要用id-1转索引
  function inputHandler(e){
    const values = props.fields.map(item => {
      if(item.id === props.id) {
        return {...item, [e.target.name]: e.target.value}
      }
      return item
    })
    props.fieldsChanger(values);
  }

  function removeElement(e){
    e.preventDefault();
    // 直接过滤掉id匹配的元素，和索引完全解耦
    const newArray = props.fields.filter(elem => elem.id !== props.id);
    props.fieldsChanger(newArray);
  }

  return (
    <div className="group__form">
      <div className="form__element">
        {/* 绑定当前元素的属性，不是整个fields数组 */}
        <input type="text" value={props.name} name="name" onChange={inputHandler} />
      </div>
      <div className="form__element">
        <input type="text" value={props.phone} name="phone" onChange={inputHandler}/>
      </div>
      <div className="form__element">
        <input type="text" value={props.age} name="age" onChange={inputHandler}/>
      </div>
      {
        // 直接用fields.length判断是否显示删除按钮
        props.fields.length > 1 ? <div className="remove__field">
          <a href="#" onClick={removeElement}>Remove</a>
        </div> : null
      }
    </div>
  )
}

const AddMore = (props) =>{
  function addMore(e){
    e.preventDefault();
    // 新生成的id用现有最大id+1，避免重复
    const nextId = props.fields.length > 0 ? Math.max(...props.fields.map(i => i.id)) + 1 : 1
    props.fieldsChanger([...props.fields, {id: nextId , name: "" , phone : "" , age :''} ]);
  }
  return (
    <div className="add__more">
      <a href="#" onClick={addMore}>Add element</a>
    </div>
  )
}


ReactDOM.render(<Form/> , document.getElementById("root"));

修复要点 #

• 所有元素定位逻辑完全和数组索引解耦，只用元素唯一ID做匹配，删除、编辑操作不会因为数组顺序变化、ID不连续失效
• 移除冗余状态，所有派生值直接从源状态计算，避免状态不同步
• 受控组件值正确绑定当前字段属性，解决undefined绑定报错
• 列表渲染使用唯一ID作为key，保证DOM diff正确性
• 新增元素ID生成逻辑兼容删除场景，不会出现ID重复问题

内容的提问来源于stack exchange，提问作者Никита Лямный