React状态部分丢失：可编辑表格数据提交异常问题

你遇到的核心问题是新增行的数据在序列化时丢失——因为你创建行数据时用了new Array()，然后给数组添加自定义属性（比如id、date），但JSON序列化数组时只会处理索引对应的元素，不会保留这些自定义属性。所以后端收到的是没有有效字段的空数据结构，自然看不到新增行的内容。

另外代码里还有几处小bug会导致数据异常，下面一步步帮你解决：

1. 把行数据从数组改为对象 #

不管是addrow还是componentDidMount里的空行初始化，都要把new Array()改成{}（普通对象），因为行数据是键值对结构，不是数组：

修改addrow方法： #

addrow = () => {
  var objToday = new Date(),
      curMonth = objToday.getMonth(),
      curYear = objToday.getFullYear(),
      curDay = objToday.getDate().toString().padStart(2, '0');
  // 构造标准日期格式，去掉不必要的后缀（后端一般不需要st/nd/th）
  var today = `${curYear}-${curMonth + 1}-${curDay}`;
  
  // 用对象替代数组存储行数据
  var newrow = {
    id: 0,
    date: today,
    location_lat: 0,
    location_lon: 0,
    value: 0
  };
  var updateData = update(this.state.data, {$push: [newrow]});
  this.setState({data: updateData});
}

修改componentDidMount中的空行初始化： #

// 原错误写法：
// var newrow = new Array();
// newrow.id = 0;
// ...
// this.setState({data:newrow})

// 修改为：
var newrow = [{
  id: 0,
  date: "",
  location_lat: "",
  location_lon: "",
  value: ""
}];
this.setState({data: newrow})

这里要注意：data始终应该是对象组成的数组，不能直接把单个对象赋值给data，否则react-table渲染会出错。

2. 修复日期计算的变量提前引用问题 #

你原来的代码里在定义today之前就用它计算dayOfMonth，这会导致today是undefined，日期字符串异常。上面的addrow修改已经去掉了无效的后缀逻辑，直接构造后端常用的YYYY-MM-DD格式日期。

3. 优化行编辑的state更新逻辑 #

当前renderEditable里的state更新写法没问题，但可以改成依赖prevState的形式，避免异步更新可能导致的数据不一致：

onBlur={e => {
  this.setState(prevState => ({
    data: prevState.data.map((row, idx) => {
      if (idx === cellInfo.index) {
        return {...row, [cellInfo.column.id]: e.target.innerHTML};
      }
      return row;
    })
  }));
}}

4. 确认save方法的正确性 #

你的saveDataMeasurements方法本身没有问题，修改完行数据的创建方式后，JSON序列化就能正确包含所有字段，后端就能收到新增行的数据了。

核心问题是用数组存储行数据导致自定义属性无法被JSON序列化，改为对象后就能解决。同时修复日期计算和state初始化的小bug，确保整个数据流程的一致性。

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