React绑定状态数组的表格新增行重复上一行输入值问题排查

问题原因 #

你的代码里有两个核心问题导致新增行重复上一行内容：

1. 直接修改状态引用+全局初始对象被篡改
   你定义的initialNewPledgeState是全局的引用类型对象，在handlePledgeChange中你直接从状态数组中取出对象修改原值：pledge[e.target.name] = value，这一步会直接修改原状态里的对象，同时连带把全局的initialNewPledgeState也修改了，后续新增行拼接的都是已经被改了值的这个对象。
2. 状态更新没有做对象层级的拷贝
   你用[...newUserPledges]只做了数组的浅拷贝，数组里存储的对象还是共用同一份引用，修改任意一行的对象值都会影响所有引用了该地址的地方。

修复方案 #

步骤1：把初始状态改成生成新对象的函数

避免所有行共用同一个初始对象引用：

// 把原来的常量改成函数，每次调用返回全新的初始对象
const getInitialNewPledgeState = () => ({
    campaign: '',
    date: dateFormatted(new Date()),
    pledges: 0,
    howPaid: '',
    confirmation: '',
    sponsor: '',
    notes: ''
});

步骤2：修复状态初始化逻辑

// 初始化时调用函数生成新对象
const [newUserPledges, setNewUserPledges] = useState([getInitialNewPledgeState()]);

步骤3：修改handlePledgeChange，避免直接修改原状态

const handlePledgeChange = (e, i) => {
    const value = e.target.value;
    const tempPledges = [...newUserPledges];
    // 对要修改的对象做浅拷贝，不修改原对象
    tempPledges[i] = {
        ...tempPledges[i],
        [e.target.name]: value
    };
    setNewUserPledges(tempPledges);
};

步骤4：修改新增行逻辑，每次新增都生成新的初始对象

const addNewPledgeRow = (e) => {
    e.preventDefault();
    // 调用函数生成全新的初始行对象，避免引用共用
    const tempPledges = [...newUserPledges, getInitialNewPledgeState()];
    setNewUserPledges(tempPledges);
};

可选优化 #

你现在用数组下标作为tr的key，在数组元素新增/删除时可能会导致渲染异常，如果你的每一行 pledge 有唯一ID的话建议替换成唯一ID作为key，没有的话可以用下标临时使用，后续如果出现渲染错位优先排查key的问题。

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