如何在ReactJS中检测多变量变更并仅返回已修改的变量

核心思路：递归对比对象差异 #

不用逐个变量判断，编写通用的对象差异对比函数，自动遍历所有字段（包括嵌套字段），仅返回与初始状态不同的键值对，从根源解决代码冗余问题。

通用差异对比函数实现 #

该函数支持普通对象、嵌套对象的对比，同时自动跳过undefined值（避免提交无效字段）：

function getObjectDiff(initial, current) {
  const diff = {};

  // 遍历初始状态的所有键
  Object.keys(initial).forEach(key => {
    const initialVal = initial[key];
    const currentVal = current[key];

    // 处理嵌套对象的递归对比
    if (typeof initialVal === 'object' && initialVal !== null && typeof currentVal === 'object' && currentVal !== null) {
      const nestedDiff = getObjectDiff(initialVal, currentVal);
      if (Object.keys(nestedDiff).length > 0) {
        diff[key] = nestedDiff;
      }
    } else if (initialVal !== currentVal) {
      // 基础类型值不同则记录差异
      diff[key] = currentVal;
    }
  });

  // 处理初始状态没有但新增的字段（按需启用）
  Object.keys(current).forEach(key => {
    if (!(key in initial)) {
      diff[key] = current[key];
    }
  });

  return diff;
}

React Hooks 适配方案 #

用useRef存储从Firestore获取的初始文档状态（避免组件重渲染时丢失初始值），提交时对比当前状态与初始状态，生成差异对象后再提交：

import { useState, useRef, useEffect } from 'react';
import { doc, getDoc, updateDoc } from 'firebase/firestore';
import { db, auth } from './firebaseConfig';

function EditDocument({ docId }) {
  // 当前编辑的状态
  const [formState, setFormState] = useState({});
  // 存储初始文档状态（用useRef避免重渲染时被覆盖）
  const initialDocRef = useRef({});

  // 组件挂载时拉取Firestore文档并保存初始状态
  useEffect(() => {
    const fetchDoc = async () => {
      const docRef = doc(db, 'your-collection', docId);
      const docSnap = await getDoc(docRef);
      if (docSnap.exists()) {
        const data = docSnap.data();
        setFormState(data);
        // 深拷贝避免引用共享导致初始状态被修改
        initialDocRef.current = JSON.parse(JSON.stringify(data));
      }
    };
    fetchDoc();
  }, [docId]);

  // 提交处理逻辑
  const handleSubmit = async (e) => {
    e.preventDefault();
    const currentUser = auth.currentUser;
    if (!currentUser) return;

    // 计算差异
    const changes = getObjectDiff(initialDocRef.current, formState);
    if (Object.keys(changes).length === 0) {
      console.log('无数据变更，无需提交');
      return;
    }

    // 追加变更元信息
    const updateData = {
      ...changes,
      updatedAt: new Date(),
      updatedBy: currentUser.uid
    };

    // 仅提交变更字段到Firestore
    const docRef = doc(db, 'your-collection', docId);
    await updateDoc(docRef, updateData);
    console.log('变更已提交');
  };

  return (
    <form onSubmit={handleSubmit}>
      {/* 示例表单元素，绑定formState */}
      <input
        type="text"
        value={formState.title || ''}
        onChange={(e) => setFormState(prev => ({ ...prev, title: e.target.value }))}
        placeholder="标题"
      />
      <textarea
        value={formState.content || ''}
        onChange={(e) => setFormState(prev => ({ ...prev, content: e.target.value }))}
        placeholder="内容"
      />
      <button type="submit">保存变更</button>
    </form>
  );
}

数组差异处理（可选） #

如果文档包含数组字段，且需要精准对比元素变更（而非全量替换），可扩展对比函数。以下示例针对带唯一id的数组元素：

function getArrayDiff(initialArr, currentArr, idKey = 'id') {
  const initialMap = new Map(initialArr.map(item => [item[idKey], item]));
  const currentMap = new Map(currentArr.map(item => [item[idKey], item]));
  const diff = { add: [], update: [], delete: [] };

  // 标记新增、修改的元素
  currentArr.forEach(item => {
    const initialItem = initialMap.get(item[idKey]);
    if (!initialItem) {
      diff.add.push(item);
    } else if (JSON.stringify(initialItem) !== JSON.stringify(item)) {
      diff.update.push(item);
    }
  });

  // 标记删除的元素ID
  initialArr.forEach(item => {
    if (!currentMap.has(item[idKey])) {
      diff.delete.push(item[idKey]);
    }
  });

  return diff;
}

// 在getObjectDiff中添加数组处理逻辑
function getObjectDiff(initial, current) {
  const diff = {};

  Object.keys(initial).forEach(key => {
    const initialVal = initial[key];
    const currentVal = current[key];

    if (Array.isArray(initialVal) && Array.isArray(currentVal)) {
      const arrayDiff = getArrayDiff(initialVal, currentVal);
      // 按需选择：要么全量更新数组，要么用Firestore的arrayUnion/arrayRemove处理差异
      if (arrayDiff.add.length || arrayDiff.update.length || arrayDiff.delete.length) {
        diff[key] = currentVal;
        // 若用Firestore数组操作符，可替换为：
        // if (arrayDiff.add.length) diff[`${key}`] = arrayUnion(...arrayDiff.add);
        // if (arrayDiff.delete.length) diff[`${key}`] = arrayRemove(...arrayDiff.delete);
      }
    } else if (typeof initialVal === 'object' && initialVal !== null && typeof currentVal === 'object' && currentVal !== null) {
      const nestedDiff = getObjectDiff(initialVal, currentVal);
      if (Object.keys(nestedDiff).length > 0) {
        diff[key] = nestedDiff;
      }
    } else if (initialVal !== currentVal) {
      diff[key] = currentVal;
    }
  });

  Object.keys(current).forEach(key => {
    if (!(key in initial)) {
      diff[key] = current[key];
    }
  });

  return diff;
}

注意事项 #

1. 深拷贝初始状态：必须用深拷贝（如JSON.parse(JSON.stringify(data))）保存初始数据，避免引用类型导致初始状态被修改，对比失效。
2. 过滤无关字段：若存在无需对比的临时状态字段，提交前需从formState中过滤。
3. Firestore嵌套字段兼容：差异中的嵌套对象可直接提交，updateDoc会自动合并嵌套字段；若需替换整个嵌套对象，确保差异值为完整对象即可。

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