如何对比两个对象数组，仅输出最新单条带主键的变更对象避免结果累积

• 输出对象数量逐次累加的核心原因：你始终拿初始的oldState作为对比基准，从来没有在保存完成后把oldState更新为最新的已存状态，导致下一次对比时会把从初始状态到当前的所有历史变更全部扫描出来，自然越打印越多
• 对比对象属性反复叠加的原因：你把col10的赋值逻辑写进了字段遍历的循环内部，每遍历到一个变化的字段，就会把旧属性和新属性全部堆在同一个临时对象上，做不到每次只取本次的差异
• 多对象全量输出的原因：你用数组索引匹配新旧数组，遍历的时候没有在找到第一个差异对象后中断流程，自然会把所有存在差异的行都打印出来

整体思路是围绕三个目标调整对比流程：

1. 不用数组索引匹配，用唯一主键col10做新旧对象的关联匹配，避免顺序变动导致的错配
2. 逐行对比，只要找到第一个存在差异的行，就立刻中断遍历，只返回这一个行的差异内容，同时强制带上主键col10作为数据库更新的定位条件
3. 完成保存动作后，立刻把oldState同步为最新的saveData，保证下一次对比的基准是上一次保存后的状态，彻底切断历史累积差异

核心对比工具函数 #

function getSingleChangedRecord(oldList, newList) {
  // 把旧列表转成col10为键的映射，匹配效率更高也更稳定
  const oldItemMap = new Map(oldList.map(item => [item.col10, item]));

  for (const currentRow of newList) {
    const matchedOldRow = oldItemMap.get(currentRow.col10);
    if (!matchedOldRow) continue;

    const changedFields = {};
    // 逐字段收集真实差异
    for (const field in currentRow) {
      if (matchedOldRow[field] !== currentRow[field]) {
        changedFields[field] = currentRow[field];
      }
    }

    // 找到第一个有差异的行就立刻返回，不再继续遍历
    if (Object.keys(changedFields).length) {
      changedFields.col10 = currentRow.col10;
      return changedFields;
    }
  }
  // 无变更返回空值
  return null;
}

调整后的AutoSave组件逻辑 #

function AutoSave({ saveData, cookieBearer, oldState, updateOldStateRef }) {
  const [saving, setSaving] = useState(false);
  const [updateDecorDoc] = useMutation(UPDATE_DECOR_DOC, {
    context: {
      headers: {
        authorization: cookieBearer,
      },
    },
  });

  // 防抖触发保存
  const debounceSave = useCallback(
    debounce(async (currentData) => {
      setSaving(true);
      const changedRecord = getSingleChangedRecord(oldState, currentData);
      
      // 无变更直接退出
      if (!changedRecord) {
        setSaving(false);
        return;
      }

      // 输出的结构完全匹配预期，比如 {col0:"Snappy", col10:"292959180223939085"}
      console.log(changedRecord);

      // 触发数据库更新
      await updateDecorDoc({
        variables: {
          updateInput: changedRecord
        }
      });

      // 关键：同步更新旧状态为已保存的最新值，从根源上避免累积差异
      updateOldStateRef(currentData);
      setSaving(false);
    }, 300),
    [oldState, updateDecorDoc, updateOldStateRef]
  );

  useEffect(() => {
    if (saveData) debounceSave(saveData);
  }, [saveData, debounceSave]);

  return saving ? <p>saving</p> : <p>Auto Save on</p>;
}

• 不要用数组索引做新旧对象的匹配依据，一定要用col10这个唯一主键匹配，不然数组顺序调整后会出现错配，扫描出根本不存在的假差异
• col10的赋值要放在差异收集完成之后，不要写在字段遍历的循环内部，避免无意义的重复赋值
• 必须在保存完成后同步更新oldState的值，这是解决“输出对象数累加、属性叠加”的核心——之前的实现一直拿最初的旧值做对比，自然会把从项目启动到当前的所有变更全部堆出来
• 对比循环里找到第一个差异对象就立刻中断返回，不要继续遍历剩下的行，就能实现仅输出最新变更的单对象的要求

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