React表格添加新行时旧数据被覆盖问题求助

你遇到的旧数据被新数据覆盖的问题，核心是直接修改了React状态中的引用类型数据（数组/对象），没有遵循状态不可变的原则。数组和对象属于引用类型，直接赋值后修改会同时改变原状态的数据，最终导致渲染异常。下面是具体修复方案：

1. 修复TableComponent的addRow方法 #

原代码直接引用了state里的data数组，push操作修改了原数组，且setState时用的还是同一个数组引用，React无法识别状态变化，还会污染原数据。修改为创建数组副本：

addRow(rowData){
    // 创建原数组的浅拷贝，避免修改原状态
    let newData = [...this.state.data];
    newData.push(rowData);
    this.setState({data: newData});
}

通过[...this.state.data]扩展运算符生成原数组的副本，后续的push操作只会作用于新数组，不会影响原状态中的数据。

2. 修复AddNewRow的changeCell方法 #

原代码直接将row赋值给newRow，修改newRow的属性时会直接修改原row对象（引用类型特性），导致输入过程中就可能污染其他引用该对象的地方。需要创建对象副本：

const changeCell = (e, index) =>{
    // 创建原对象的浅拷贝，避免修改原状态
    let newRow = {...row};
    let key = Object.keys(newRow)[index];
    newRow[key] = e.target.value;
    setRow(newRow);
}

用{...row}扩展运算符生成原对象的副本，修改新对象的属性不会影响原row对象，保证状态更新的独立性。

可选优化：同步父组件传递的rowData #

如果后续父组件传递的rowData会发生变化，建议在AddNewRow中添加useEffect监听，确保子组件状态与父组件同步：

import { useState, useEffect } from 'react';

export default function AddNewRow({rowData, addRow}){
    const [row, setRow] = useState(rowData);

    useEffect(() => {
        setRow(rowData);
    }, [rowData]);

    // 其余代码不变
}

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