React如何检测state变化并在info状态更新时执行onSubmitHandler函数

方案1：通过useEffect监听info状态变更自动触发 #

使用React的useEffect钩子监听info的变化，状态变更时自动执行提交逻辑。如果info是跟随用户输入实时变化的，建议增加防抖逻辑避免频繁请求服务器：

import { useEffect, useCallback } from 'react';

// 用useCallback包裹提交函数，避免依赖变化导致的重复执行
const onSubmitHandler = useCallback(async (model) => {
    const emptyInputs = invalidInputs(model);
    if (emptyInputs.length) {
      emptyInputs.forEach((key) =>
        setError((prev) => ({ ...prev, [key]: true }))
      );
    } else {
      const response = await Save(model);
      setAllClient((currentArray) => [response, ...currentArray]);
      closeModal();
      setError({});
    }
}, [invalidInputs, setError, Save, setAllClient, closeModal]);

// 监听info变化，触发提交
useEffect(() => {
  // 这里根据你的业务逻辑传参，确认是否直接用info作为提交的model
  onSubmitHandler(info);
}, [info, onSubmitHandler]);

需要防抖的话可以用以下调整后的代码，比如设置输入停止500ms后再提交：

// 简易防抖工具，也可直接使用lodash的debounce方法
const debounce = (func, delay) => {
  let timeoutId;
  const debounced = (...args) => {
    clearTimeout(timeoutId);
    timeoutId = setTimeout(() => func.apply(this, args), delay);
  };
  debounced.cancel = () => clearTimeout(timeoutId);
  return debounced;
};

const debouncedSubmit = useCallback(debounce(onSubmitHandler, 500), [onSubmitHandler]);

useEffect(() => {
  debouncedSubmit(info);
  // 组件卸载时清空待执行的提交任务
  return () => debouncedSubmit.cancel();
}, [info, debouncedSubmit]);

方案2：在onPostInfoChanges的执行流程中追加提交 #

因为onPostInfoChanges本身就是处理输入变更的回调，你可以直接在它的调用位置追加提交逻辑，不需要额外监听状态：

// 假设你原本调用onPostInfoChanges的输入处理逻辑如下
const handleInputUpdate = (event) => {
  // 先执行原有输入变更处理逻辑
  onPostInfoChanges(event);
  // 输入处理完成后直接触发提交，同样可以叠加防抖逻辑
  debouncedSubmit(info);
}

注意：可以根据业务需要在调用onSubmitHandler前增加前置校验，比如判断必填项是否全部填写完成，避免触发无效的报错或服务器请求。

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