React中使用useDebounce防抖提交表单时触发无限循环的问题求助

问题分析 #

你遇到的无限循环主要由几个不稳定的引用和不合理的依赖导致，我来拆解核心问题：

1. 每次渲染都重新创建Mutation实例
   在useRecommendationFormHandler中，const updateRecommendation = Criteria.update();会在每次组件渲染时调用useUpdate，而useUpdate内部返回的{handle, loading, error}是每次都新建的对象，导致updateRecommendation的引用每次渲染都变化。

2. useCallback依赖了不稳定的引用
   你的submitRecommendation用useCallback包裹，但依赖了updateRecommendation这个每次都变的对象，导致submitRecommendation的引用也会频繁更新。

3. useEffect触发逻辑失控
   useEffect的依赖数组包含submitRecommendation，每次它变化都会触发effect执行submitRecommendation；如果提交操作又间接导致form或其他状态变化，就会形成无限循环。

解决方案 #

我们可以通过稳定引用、优化依赖和增加触发判断这几个步骤来修复：

步骤1：稳定Mutation实例的引用

修改useUpdate，用useMemo包裹返回的对象，确保只有当mutation的内部状态（loading/error）变化时，对象引用才更新：

// useRecommendation.js
import { useMutation, useMemo } from '@apollo/client';
import { UPDATE_CRITERIA } from './your-queries-file'; // 替换为你的实际路径

export const useUpdate = () => {
  const [updateCriteria, { loading, error }] = useMutation(UPDATE_CRITERIA);
  
  // 用useMemo稳定对象引用
  const update = useMemo(() => ({
    handle: updateCriteria,
    loading,
    error
  }), [updateCriteria, loading, error]);

  return update;
};

步骤2：优化表单处理hook的依赖与逻辑

修改useRecommendationFormHandler，让useCallback依赖稳定的引用，并增加提交的前置判断：

export const useRecommendationFormHandler = ({ form }) => {
  // 现在updateRecommendation的引用会稳定，仅当loading/error变化时更新
  const updateRecommendation = Criteria.update();
  
  // 防抖：仅监听表单的核心字段，避免无关变化触发防抖
  const debouncedForm = useDebounce({
    id: form.id,
    conformity: form.conformity,
    importance: form.importance,
    comment: form.comment,
  }, 1000);

  // 依赖稳定的updateRecommendation.handle（Apollo的mutate函数引用是稳定的）
  const submitRecommendation = useCallback(async () => {
    // 前置判断：避免空提交或无效提交
    if (!debouncedForm.id || debouncedForm.importance === null) return;

    try {
      const { data } = await updateRecommendation.handle({
        variables: {
          input: {
            conformity: debouncedForm.conformity,
            importance: debouncedForm.importance,
            comment: debouncedForm.comment,
            conclusion: debouncedForm.conformity === 0 && debouncedForm.importance !== null,
          },
          criteria_id: debouncedForm.id
        }
      });

      return data;
    } catch (error) {
      console.error("Erro ao atualizar a criteria", error);
    }
  }, [updateRecommendation.handle, debouncedForm]);

  // 仅当debouncedForm变化时触发，依赖更稳定
  useEffect(() => {
    submitRecommendation();
  }, [debouncedForm, submitRecommendation]);

  return {
    isLoading: updateRecommendation.loading,
    error: updateRecommendation.error
  };
};

步骤3：确保表单状态的不可变更新

在你的表单handleChange中，一定要通过不可变方式更新form状态，否则useDebounce无法正确捕获变化：

// 示例handleChange实现
const handleChange = (formId, field, value) => {
  setForms(prevForms => prevForms.map(f => 
    f.id === formId ? { ...f, [field]: value } : f
  ));
};

关键注意点 #

• 每个循环渲染的RecommendationForm都有独立的防抖和mutation实例，这是合理的，确保每个表单的loading/error状态互不干扰。
• 如果提交后需要更新表单状态，要避免触发新一轮的防抖提交（比如不要在提交成功后修改debouncedForm中监听的字段）。

备注：内容来源于stack exchange，提问作者Hid