如何判断React的useState对应的setState是否至少被调用过一次？

首先明确：无法直接判断React的useState对应的set函数是否被调用过，因为React没有提供追踪set函数调用状态的API，set函数本身也没有暴露相关属性。

不过可以通过以下两种方式实现“仅提交修改过的字段”的需求：

方式一：维护修改标记状态 #

单独维护一个记录字段修改状态的对象，每次调用set函数时同时标记对应字段为已修改：

import { useState } from 'react';

// 初始化表单状态
const [description, setDescription] = useState(data?.description ?? '');
// 记录哪些字段被修改过
const [modifiedFields, setModifiedFields] = useState({});

// 自定义修改函数，同时标记字段为已修改
const updateDescription = (newVal) => {
  setDescription(newVal);
  setModifiedFields(prev => ({ ...prev, description: true }));
};

// 提交逻辑
const handleSubmit = () => {
  const submission = {};
  // 只加入被修改过的字段
  if (modifiedFields.description) {
    submission.description = description;
  }
  // 其他字段同理处理
  commit(submission);
};

方式二：封装自定义Hook（适合多字段表单） #

如果表单字段较多，可以封装一个自定义Hook，统一管理字段值和修改状态，减少重复代码：

import { useState } from 'react';

// 自定义Hook：追踪状态值和是否被修改
const useTrackedField = (initialValue) => {
  const [value, setValue] = useState(initialValue);
  const [isModified, setIsModified] = useState(false);

  const trackedSetValue = (newValue) => {
    setValue(newValue);
    setIsModified(true);
  };

  return [value, trackedSetValue, isModified];
};

// 使用自定义Hook
const [description, setDescription, isDescModified] = useTrackedField(data?.description ?? '');
const [title, setTitle, isTitleModified] = useTrackedField(data?.title ?? '');

// 提交逻辑
const handleSubmit = () => {
  const submission = {};
  if (isDescModified) submission.description = description;
  if (isTitleModified) submission.title = title;
  commit(submission);
};

这两种方式都不需要依赖原始data的结构做对比，直接通过主动标记的方式追踪修改状态，更适配你提到的“原始data提取对比麻烦”的场景。

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