mutateAsync 数据在提交事件中未定义（反应查询）

Question

我目前正在尝试使用 React Query 向我的 API 发出请求。当我在组件函数范围内记录我的数据时，它会正常记录并提供我期望的数据，它还会在 handleSubmit 之前记录正确的数据。当我在 handleSubmit 中记录我的数据变量时，提交后，它总是记录 undefined.

// useSignup.ts

import axios from "axios";
import { useMutation } from "react-query";

const signup = (credidentials: any) => {
    return axios.post("/api/signup", credidentials);
};

const useSignup = () => {
    return useMutation(signup);
};

export default useSignup;

// Signup.tsx

const {
    mutateAsync: makeApiRequest,
    isLoading,
    isSuccess,
    isError,
    data: authData,
} = useSignup();

console.log(authData); // Updates fine and gives the correct data

const handleSubmit = async (e: FormEvent<HTMLFormElement>) => {
    e.preventDefault();

    await makeApiRequest(input);
    console.log(authData); // Always undefined
};

Answer 1

因为 awaiting makeApiRequest 不会在同一个事件处理程序中立即从挂钩“定义”数据。它类似于：

const [count, setCount] = React.useState(undefined)

<button onClick={() => {
  setCount(1)
  console.log(count)
}) />

此处，记录计数将也为 undefined，因为它只会在下一个渲染周期中设置为 1。成为 async 不会改变这一点 - 这就是反应的工作方式。

如果您想在成功提交后 访问数据，请使用 mutate 函数的 onSuccess 回调：

makeApiRequest(input, { onSuccess: newData => console.log(newData) }

你也可以使用 mutateAsync，其中 returns 来自突变的数据，但你需要手动捕获错误，我不认为这个经常需要。

mutateAsync 数据在提交事件中未定义（反应查询）

mutateAsync data is undefined in submit event (react query)

typescript

reactjs

react-query