React表格新增数据问题：硬编码行后添加数据旧数据被覆盖

嘿，我来帮你搞定这个问题！你遇到的核心问题是更新state时直接替换了整个data数组，而没有保留原来的硬编码数据再追加新内容。咱们一步步来修复：

先看你的初始State代码 #

首先把你给出的构造函数代码整理并修正语法小问题：

constructor(props) {
  super(props);
  this.state = {
    id: '',
    name: '',
    birth: '',
    data: [
      { id: '1', name: 'Muhammad Ali jinnah', dateofBirth: '1876' },
      { id: '2', name: 'Allama Iqbal', dateofBirth: '1877...' }
    ]
  };
}

问题原因 #

你大概率是在添加新数据时写了类似这样的错误代码：

// 错误示例：直接替换data数组，旧数据被覆盖
this.setState({ data: newSingleItem });

这种写法会把原来的硬编码数组完全替换成新的单个数据，自然就看不到旧数据了。

正确的解决方案 #

更新data时，要保留原有的数组内容，再把新数据追加到末尾。我们可以用ES6的扩展运算符...来复制原数组，再添加新元素，同时推荐用函数式的setState来确保拿到最新的state：

示例代码（假设你有一个添加数据的方法） #

handleAddData = () => {
  // 1. 整理新数据对象（注意字段名要和初始data里的一致！你这里state里是birth，初始data是dateofBirth，要统一）
  const newDataItem = {
    id: this.state.id,
    name: this.state.name,
    dateofBirth: this.state.birth // 这里把birth改成dateofBirth，和初始数据字段统一
  };

  // 2. 用函数式更新state，确保拿到最新的prevState
  this.setState(prevState => ({
    // 复制原data数组，再追加新元素
    data: [...prevState.data, newDataItem],
    // 清空表单输入框
    id: '',
    name: '',
    birth: ''
  }));
};

关键注意点 #

1. 字段名一致性：你state里的birth和初始data里的dateofBirth字段名不统一，一定要改成一样的，不然表格渲染新数据时会找不到对应字段。
2. 函数式setState：因为setState是异步操作，用prevState可以确保我们操作的是最新的state数据，避免出现数据更新不及时的问题。
3. 不可直接修改state：永远不要直接修改this.state.data，必须通过setState来更新，并且要返回新的数组（而不是修改原数组），这符合React的不可变数据原则。

这样修改后，你添加新数据时，原来的硬编码行会一直保留，新数据会追加在它们后面啦！

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