基于索引及输入/下拉变更更新对象时原有字段值丢失问题咨询

问题根因 #

你当前出现字段被重置的核心原因是：每次更新单个字段时，没有基于对应索引的已有对象值做增量更新，而是直接赋值新对象覆盖原有全部字段，所以修改resolution时status被清空、修改status时resolution被重置。同时你维护了dataV、dataVs多个独立数组存储不同字段的更新值，合并逻辑混乱也会导致字段覆盖。

修复方案 #

直接基于mydatadata.items中已有的对象做增量合并即可，无需维护多个独立数组存储字段值，修改后的代码如下：

1. 修改分辨率下拉框变更方法 #

onChangeRes = (stringValue) => (event) => {
  const targetIndex = stringValue;
  const newResolution = event.target.value;
  // 增量合并：先展开原有对象的所有字段，仅覆盖要更新的resolution字段
  mydatadata.items[targetIndex] = {
    ...mydatadata.items[targetIndex],
    resolution: newResolution
  };
  // 保留你原有的过滤逻辑
  mydatadata.items = Object.fromEntries(
    Object.entries(mydatadata.items)
      .filter(([_, item]) => {
        const qtyKey = Object.keys(item).find(key => key.startsWith('qty_'));
        return !(qtyKey && !item[qtyKey]);
      })
  );
};

2. 修改状态下拉框变更方法 #

onChangeStatus = (stringValue) => (event) => {
  const targetIndex = stringValue;
  const newStatus = event.target.value;
  // 增量合并：仅更新status字段，保留其他原有值
  mydatadata.items[targetIndex] = {
    ...mydatadata.items[targetIndex],
    status: newStatus
  };
  // 保留原有过滤逻辑
  mydatadata.items = Object.fromEntries(
    Object.entries(mydatadata.items)
      .filter(([_, item]) => {
        const qtyKey = Object.keys(item).find(key => key.startsWith('qty_'));
        return !(qtyKey && !item[qtyKey]);
      })
  );
};

3. 修改输入框赋值方法overrideValue #

overrideValue = (index, rId, itemid, override, resfield, statusValue) => {
  if(override != "") console.log(statusValue);
  const stat = statusValue;
  const res = this.state.job.resolutions.find(x => x.option_label === resfield.toLowerCase()).option_id;
  // 原有逻辑删除写死的status为空，增量合并原有值
  datas[rId] = {
    ...datas[rId], // 先合并已有值
    [stat]: override,
    resolution: res.toString(),
    // 仅首次初始化时设置status为空，已有值的情况下不覆盖
    ...(datas[rId]?.status === undefined ? {status: ""} : {}),
    order: itemid
  };
  arr3 = datas.map((item, i) => Object.assign({}, item, dataV[i] || {}));
  Object.assign(mydatadata.items, arr3);
  // 保留原有过滤逻辑
  mydatadata.items = Object.fromEntries(
    Object.entries(mydatadata.items)
      .filter(([_, item]) => {
        const qtyKey = Object.keys(item).find(key => key.startsWith('qty_'));
        return !(qtyKey && !item[qtyKey]);
      })
  );
}

优化建议 #

你原来定义的dataV、dataVs两个独立数组可以直接删除，所有字段更新直接操作mydatadata.items的对应对象即可，逻辑更简洁，也不会出现不同数组合并导致的字段覆盖问题。

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