主页 / coding / 问题 / 79348981
Accepted
Hid
Asked: 2025-01-12 06:15:11 +0800 CST

使用 useDebounce 时出现无限循环

  • 772

我在 React 中创建一个项目，需要填写表单，然后将答案发送到我的数据库中，为此，我想使用钩子useDebounce在用户停止交互后发送提交。但是当我尝试这样做时，它会导致无限循环，我不知道如何实现它。

这是我的代码审查：

首先，我有一个钩子，它使用 GraphQL 执行来自该实体的所有操作：

// useRecommendation.js
  ...
// other operations

export const useUpdate = () => {
  const [updateCriteria, { loading, error }] = useMutation(UPDATE_CRITERIA);
  const update = { handle: updateCriteria, loading, error };

  return update;
};

然后我将所有操作导入到一个像模型一样的对象中：

// Recommendation.js
const Recommendation = {
  all: useGetAll,
  byCategory: useGetByCategory,
  create: useCreate,
  update: useUpdate
}

export default Recommendation

然后我将这个实体导入到我的组件处理程序中：

export const useRecommendationFormHandler = ({ form }) => {
  const updateRecommendation = Criteria.update();

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

      return data;
    } catch (error) {
      console.error("Erro ao atualizar a criteria", error);
    }
  };

  return {
    isLoading: updateRecommendation.loading
  }
};

我认为有必要指出，我尝试使用 useDebounce 的组件是在循环内呈现的：

      <Grid sx={{ paddingX: 3 }}>
        {forms.length !== 0 && criterias.data.map((data, i) => (
            <RecommendationForm 
              key={data.id} 
              recommendation={data.recommendation.description}
              form={forms.find(f => f.id === data.id)}
              onChange={handleChange}
              index={i}
              onRefetch={onRefetch} 
            />
          ))
        }
      </Grid>

我该怎么做才能使用这个钩子将答案发送到我的数据库？

编辑：我像这样使用 useDebounce：

  const debouncedForm = useDebounce(form, 1000);
  const updateRecommendation = Criteria.update();

  const submitRecommendation = useCallback(async () => {
    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);
    }
  }, [debouncedForm, updateRecommendation]);

  useEffect(() => {
    if (debouncedForm) {
      submitRecommendation()
    }
  }, [debouncedForm, submitRecommendation])
javascript

1 个回答

  1. Best Answer

    如果一定要我猜的话，答案是这样的：

      const submitRecommendation = // ...

  useEffect(() => {
    if (debouncedForm) {
      submitRecommendation()
    }
  }, [debouncedForm, submitRecommendation])

    我猜想这submitRecommendation会更新组件状态并始终返回一个新函数，这会导致useEffect在每个渲染周期（它自己触发）上调用该函数。看起来它submitRecommendation不应该影响何时useEffect触发它。如果您已为其启用 eslint 规则，请忽略它。

      useEffect(() => {
    if (debouncedForm) {
      submitRecommendation()
    }
  }, [debouncedForm])
    • 0

相关问题