0

我目前正在尝试使用 React Query 向我的 API 发出请求。当我在组件函数范围内记录我的数据时，它会很好地记录并提供我期望的数据，它还会在执行之前记录正确的数据handleSubmit。当我在里面记录我的数据变量handleSubmit时，提交后，它总是记录未定义。

// 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
};
4

1 回答 1

1

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

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

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

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

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

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

您也可以使用mutateAsync，它从突变中返回数据，但您需要手动捕获错误，我认为这不是经常需要的。

于 2021-05-11T17:23:32.633 回答