Grid组件更新单个字段时另一字段值变为Undefined的问题解决求助

问题根源 #

每次触发DateCallBack或OnTextCallback时，回调函数updateGrid接收的data对象只包含当前修改字段的值——比如修改日期时只有id和dateVal，textVal为undefined；修改文本时只有id和textVal，dateVal为undefined。直接对x.name或x.Establish赋值会把未传入的字段覆盖成undefined，同时直接修改原数组引用也不符合React状态更新的规范。

修复后的代码 #

const updateGrid = (data) => {
  if (Array.isArray(newDataHere) && newDataHere.length > 0) {
    // 创建原数组的深拷贝，避免直接修改原状态数组
    const tempData = newDataHere.map(item => ({ ...item }));
    
    // 找到对应id的条目，只更新传入的有效字段
    const targetItem = tempData.find(x => x.id === data.id);
    if (targetItem) {
      // 仅当data中存在对应字段时才更新，保留原有字段值
      if (data.textVal !== undefined) {
        targetItem.name = data.textVal;
      }
      if (data.dateVal !== undefined) {
        targetItem.Establish = data.dateVal;
      }
    }
    
    setDataAll(tempData);
  }
  // 注意：setDataAll是异步操作，直接打印dataAll无法获取最新值，可通过useEffect监听dataAll变化查看
};

关键优化点 #

• 避免直接修改原数组：通过map和对象解构创建数组副本，保证状态更新的不可变性，符合React状态管理要求。
• 条件更新字段：只在data中存在对应字段值时才更新目标条目，防止原有有效字段被覆盖为undefined。
• 使用find替代map：find可直接定位目标条目，相比遍历所有条目的map性能更优。

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