React前端如何对比对象数组，仅提交更新元素至后端

要实现仅提交修改过的对象到后端，核心是对比原数组（Redux获取的array1）和修改后的数组（组件state中的stateVariable），筛选出属性发生变化的对象。以下是几种实用的实现方案：

基础方案：浅比较（适用于对象属性为基本类型） #

1. 编写对象相等判断函数 #

先实现一个浅比较函数，用于判断两个对象的基本类型属性是否完全一致：

const isObjectEqual = (obj1, obj2) => {
  if (obj1 === obj2) return true;
  const keys1 = Object.keys(obj1);
  const keys2 = Object.keys(obj2);
  if (keys1.length !== keys2.length) return false;
  for (const key of keys1) {
    if (obj1[key] !== obj2[key]) return false;
  }
  return true;
};

2. 筛选变化的对象 #

将原数组转为以id为键的映射表，方便快速查找对应对象，再遍历修改后的数组对比筛选：

const getChangedItems = (originalArray, modifiedArray) => {
  // 转成id映射表，提升查找效率
  const originalItemMap = originalArray.reduce((map, item) => {
    map[item.id] = item;
    return map;
  }, {});

  // 过滤出有变化的对象
  return modifiedArray.filter(modifiedItem => {
    const originalItem = originalItemMap[modifiedItem.id];
    // 原数组中不存在的对象（新增）也会被保留，不需要的话可以改成return false
    if (!originalItem) return true;
    return !isObjectEqual(originalItem, modifiedItem);
  });
};

3. 在组件中使用 #

在提交API的逻辑中调用上述函数：

const handleSubmit = async () => {
  const changedItems = getChangedItems(array1, stateVariable);
  
  // 没有修改则直接返回，避免无效请求
  if (changedItems.length === 0) return;

  try {
    await fetch('/api/update-users', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(changedItems),
    });
    // 提交成功后的逻辑：比如更新Redux状态、提示用户等
  } catch (err) {
    console.error('提交失败:', err);
    // 错误处理逻辑
  }
};

进阶方案：深比较（适用于含嵌套属性的对象） #

如果对象包含嵌套属性（比如{id:1, user: {name: 'Sandra', age: 25}}），浅比较会失效，需要实现深比较函数：

const deepEqual = (obj1, obj2) => {
  if (obj1 === obj2) return true;
  // 非对象或null直接返回false
  if (typeof obj1 !== 'object' || obj1 === null || typeof obj2 !== 'object' || obj2 === null) {
    return false;
  }
  const keys1 = Object.keys(obj1);
  const keys2 = Object.keys(obj2);
  if (keys1.length !== keys2.length) return false;
  // 递归对比每个属性
  for (const key of keys1) {
    if (!keys2.includes(key) || !deepEqual(obj1[key], obj2[key])) {
      return false;
    }
  }
  return true;
};

将getChangedItems中的isObjectEqual替换为deepEqual即可。

简化方案：使用Lodash的深比较 #

如果项目中已经引入Lodash，可以直接用_.isEqual替代自定义的深比较函数，减少代码量：

import _ from 'lodash';

const getChangedItems = (originalArray, modifiedArray) => {
  const originalItemMap = originalArray.reduce((map, item) => {
    map[item.id] = item;
    return map;
  }, {});

  return modifiedArray.filter(modifiedItem => {
    const originalItem = originalItemMap[modifiedItem.id];
    return !originalItem || !_.isEqual(originalItem, modifiedItem);
  });
};

可选优化：仅提交变化的属性而非完整对象 #

如果后端支持接收仅含变化属性的对象，可以修改逻辑，只收集每个对象中变化的字段：

const getChangedFields = (originalItem, modifiedItem) => {
  const changed = { id: modifiedItem.id };
  for (const key of Object.keys(modifiedItem)) {
    if (!_.isEqual(originalItem[key], modifiedItem[key])) {
      changed[key] = modifiedItem[key];
    }
  }
  return changed;
};

const getChangedItemsWithUpdatedFields = (originalArray, modifiedArray) => {
  const originalItemMap = originalArray.reduce((map, item) => {
    map[item.id] = item;
    return map;
  }, {});

  return modifiedArray.reduce((result, modifiedItem) => {
    const originalItem = originalItemMap[modifiedItem.id];
    if (!originalItem) {
      result.push(modifiedItem);
      return result;
    }
    const changedFields = getChangedFields(originalItem, modifiedItem);
    // 仅当有除id外的变化字段时才加入
    if (Object.keys(changedFields).length > 1) {
      result.push(changedFields);
    }
    return result;
  }, []);
};

该函数返回的结果示例为：

[
  {id:1, username:'sandra123'},
  {id:4, type:'admin'}
]

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