代码之家 › 专栏 › 技术社区 › Enzo

React组件中的get-customhook事件

react-query reactjs

Enzo · 技术社区 · 2 年前

我正在构建一个UI,该UI使用单击按钮时出现的窗体。

当我提交表格并且突变结束时,我希望它关闭。

然而,我不确定如何做到这一点,因为我的突变是在一个自定义挂钩中:

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

  const { isLoading, mutate } = useMutation({
    mutationFn: ({
      user_id,
      type,
    }) =>
      createContract(
        user_id,
        type,
      ),
    onSuccess: async () => {
      return queryClient
        .invalidateQueries({
          queryKey: queryKey,
        })
        .then(() => {
          enqueueSnackbar("Contract created");
        });
    },
  });

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

  return { mutate, isLoading };
}

我的表格:

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

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

我希望我能打电话 onSuccess 当我的突变成功时。

0 回复 | 直到 2 年前

kapaakinos 2 年前

不要试图从onSuccess/onError函数调用副作用-> https://tkdodo.eu/blog/breaking-react-querys-api-on-purpose

我会这样处理的

使用mutateAsync而不是mutate,并通过侦听finally()来等待代码完成。

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

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

  const handleSubmit = async (formValues) => {
    const req = await mutateAsync(formValues).finally(()=> onSuccess())
    
  }

}

Enzo 2 年前

我使用解决了问题 mutateAsync 如kapaakinos所述

这是我正在使用的代码:


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

  const { isLoading, mutate, mutateAsync } = useMutation({
    mutationFn: ({
      user_id,
      type,
    }) =>
      createContract(
        user_id,
        type,
      ),
    onSuccess: async () => {
      return queryClient
        .invalidateQueries({
          queryKey: queryKey,
        })
        .then(() => {
          enqueueSnackbar("Contract created");
        });
    },
  });

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

  return { mutate, mutateAsync, isLoading };
}

我在表格中这样使用:

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

mutateAsync({
      user_id: parseInt(id),
      type: data.type,
    }).then(() => onSuccess());

推荐文章

Ângelo Rigo · ReactJS映射:如何迭代[关闭]

1 年前

Facundo Cabrera · 意外的应用程序错误!useNavigate()只能在<Router>组件的上下文中使用

1 年前

user29295031 · 如何使用react和vite覆盖Tailwinds css 4默认设计

1 年前

Gukkey · 在React中明确隐藏日期类型输入后,如果我单击父div,如何显示日期选择器?

1 年前

Luckkks · 过渡色工作不正常

1 年前

ModernEraCaveman · 如何对齐我的Bootstrap容器以适应网页的整个宽度?

1 年前

vatsal chauhan · 即使在字体预加载时,文本加载也很慢

1 年前

hasratyan · Next.js 15 API路由-动态路由中的无效GET导出错误[id]

1 年前

noblerare · Vite错误-未定义导出(SSR)

1 年前

ProfessorFinesse · 在默认表单中完成帖子请求时,“res.send”会去哪里?

1 年前