React组件中如何在自定义Hook的Mutation成功时触发表单关闭

1. 扩展自定义Hook，支持外部成功回调 #

修改useCreateContract，新增onSuccess参数，在mutation完成内部逻辑后调用这个外部回调：

export function useCreateContract({ queryKey, onSuccess }) {
  const queryClient = useQueryClient();
  const { enqueueSnackbar } = useSnackbar();

  const { isLoading, mutate } = useMutation({
    mutationFn: ({ user_id, type }) => createContract(user_id, type),
    onSuccess: async () => {
      await queryClient.invalidateQueries({ queryKey });
      enqueueSnackbar("Contract created");
      // 触发外部传入的成功回调
      onSuccess?.();
    },
  });

  const createContract = (user_id, type) => {
    return axios.post(`/api/contracts`, { user_id, type });
  };

  return { mutate, isLoading };
}

2. 在表单组件中传递关闭逻辑 #

将Form组件的onSuccess props传入自定义Hook，让mutation成功时触发关闭表单的逻辑：

export function Form({ onCancel, onSuccess }) {
  const { id } = useParams();

  const { mutate, isLoading } = useCreateContract({
    queryKey: ["users", id, "contracts"],
    onSuccess: onSuccess
  });

  // 示例提交逻辑，根据你的表单数据调整参数
  const handleSubmit = (formData) => {
    mutate({ user_id: id, type: formData.type });
  };

  // 表单渲染、取消按钮等逻辑...
  return (
    <div>
      {/* 表单内容 */}
      <button onClick={handleSubmit} disabled={isLoading}>提交</button>
      <button onClick={onCancel}>取消</button>
    </div>
  );
}

说明 #

通过给自定义Hook添加外部回调参数，既保留了Hook内部的业务逻辑（缓存失效、成功提示），又实现了mutation成功事件的透传，让表单组件可以控制成功后的行为（关闭弹窗）。

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