React中如何在POST请求仅传递变更的表单状态值？

方案1：合并状态为单一对象 + 生成diff #

先把分散的useState合并成一个状态对象，统一处理更高效：

import { useState, useMemo } from 'react';

// 合并表单状态
const [formState, setFormState] = useState({
  name: props.user?.name ?? null,
  lang: props.user?.lang ?? null,
  enableChecks: props.user?.checkEnabled ?? false
});

// 缓存初始用户数据快照，避免重复计算
const initialUser = useMemo(() => ({
  name: props.user?.name ?? null,
  lang: props.user?.lang ?? null,
  enableChecks: props.user?.checkEnabled ?? false
}), [props.user]);

// 生成仅含变更字段的请求体
const getUpdatedPayload = () => {
  return Object.entries(formState).reduce((payload, [key, value]) => {
    // 对比当前值与初始值，不同则加入payload
    if (value !== initialUser[key]) {
      payload[key] = value;
    }
    return payload;
  }, {});
};

提交请求时直接调用该函数即可：

const handleSubmit = async () => {
  const payload = getUpdatedPayload();
  if (Object.keys(payload).length > 0) {
    await fetch('/api/user', {
      method: 'PATCH',
      body: JSON.stringify(payload),
      headers: { 'Content-Type': 'application/json' }
    });
  }
};

方案2：保留分散状态，统一生成diff #

如果不想改动现有分散的useState结构，可临时合并状态后对比：

import { useState, useMemo } from 'react';

// 原分散状态
const [name, setName] = useState(props.user?.name ?? null);
const [lang, setLang] = useState(props.user?.lang ?? null);
const [enableChecks, setEnableChecks] = useState(props.user?.checkEnabled ?? false);

// 缓存初始值快照
const initialUser = useMemo(() => ({
  name: props.user?.name ?? null,
  lang: props.user?.lang ?? null,
  enableChecks: props.user?.checkEnabled ?? false
}), [props.user]);

const getUpdatedPayload = () => {
  // 临时合并当前状态
  const currentState = { name, lang, enableChecks };
  return Object.entries(currentState).reduce((payload, [key, value]) => {
    if (value !== initialUser[key]) {
      payload[key] = value;
    }
    return payload;
  }, {});
};

处理复杂类型字段的情况 #

如果字段是对象、数组这类复杂类型，直接用!==会因引用不同误判变更，可实现一个简单的深对比函数：

const isEqual = (a, b) => {
  if (a === b) return true;
  // 处理null/undefined和非对象类型
  if (typeof a !== 'object' || typeof b !== 'object' || a === null || b === null) {
    return false;
  }
  // 对比对象键数量
  const keysA = Object.keys(a);
  const keysB = Object.keys(b);
  if (keysA.length !== keysB.length) return false;
  // 递归对比每个键的值
  for (const key of keysA) {
    if (!keysB.includes(key) || !isEqual(a[key], b[key])) {
      return false;
    }
  }
  return true;
};

// 修改reduce里的判断逻辑
if (!isEqual(value, initialUser[key])) {
  payload[key] = value;
}

内容的提问来源于stack exchange，提问作者U. Watt