对比JavaScript对象数组差异 实现表单单个输入框独立加载状态

现有问题 #

• 加载状态类型错误：isLoading 初始声明为字符串类型，无法存储多字段的独立加载状态，无法实现单字段加载控制
• 差异对比逻辑错误：
  • 初始数据initialFormData本身就是结构化对象数组，调用Object.entries()遍历会错误把数组下标当成字段key，无法正确匹配字段
  • 原过滤条件为「key不存在于初始数组」，和需求的「同key下value发生变化」的判断逻辑完全不符
• 状态重置逻辑缺失：请求结束后没有清空加载状态，会导致加载动画持续展示

调整后代码 #

// 改为用Set存储正在加载的字段key，方便快速判断单个字段的加载状态
const [isLoading, setIsLoading] = useState(new Set());

// 未输入任何内容时的初始数据
const initialFormData = [{key: 'USER_DEFINED_QUESTIONS', value: ''}, {key: 'RECOMMENDED_FIELDS', value: ''}]
// 提前把初始数据转成key-value映射，提升对比效率
const initialFormMap = new Map(initialFormData.map(item => [item.key, item.value]));

const saveSubmit = async (values) => {
  // 筛选出和初始值相比value发生变化的字段key
  const modifiedFields = Object.entries(values)
    .filter(([key, value]) => initialFormMap.get(key) !== value)
    .map(([key]) => key);

  const body = { ...values };
  // 把修改过的字段存入加载状态
  setIsLoading(new Set(modifiedFields));
  const res = await putResults({ id, body });
  // 请求结束后清空加载状态
  setIsLoading(new Set());
  if (res && !(await checkErrors(res))) {
    return res;
  }
};

字段渲染侧用法 #

每个输入字段绑定加载器时，仅需判断当前字段的key是否在isLoading集合中即可：

// 示例：USER_DEFINED_QUESTIONS字段的加载器控制
<input name="USER_DEFINED_QUESTIONS" />
{isLoading.has('USER_DEFINED_QUESTIONS') && <Spin />}

// 示例：RECOMMENDED_FIELDS字段的加载器控制
<input name="RECOMMENDED_FIELDS" />
{isLoading.has('RECOMMENDED_FIELDS') && <Spin />}

内容的提问来源于stack exchange，提问作者Steven Dornan