react-query hook 在 setState 之前掛載

Question

我想在 react-query useMutation Hook 的onError部分調用console.log(email) 。 但是，控制台的''值是 output。

查看代碼，如果發生isError錯誤，我們將文本放入setEmail ，並在發生onError后打印console.log(email) 。

如果我使用console.log(email) ，它被調用為空值，但我想打印"hi isError" 。

邏輯是當按鈕被點擊時， handleSocialLogin mutate function 被調用， isError掛載在useEffect中，然后setEmail("hi isError")被保存在isError中，然后console.log(email)在onError部分被調用。

export const googleLogin = (data: any) => {
  return axios.post("/login/google", data).then(({ data }) => data as any);
};

const [email, setEmail] = useState<string>("");
const { mutate, isLoading, isError } = useMutation(googleLogin, {
  onError(error: AxiosError) {
    console.log(email);
  },
});

useEffect(() => {
  if (isError) {
    setEmail("hi isError");
  }
}, [isError]);

function handleSocialLogin(event: React.MouseEvent<HTMLElement> & any) {
  mutate({
    clientIp: "hi",
  });
}

return <button onClick={handleSocialLogin}>button</button>;

Answer 1

onError 幾乎與突變掛鈎中的isError變化同時執行。 useEffect正在檢測isError變化然后執行，這意味着它將在onError之后發生。

如果你想控制結果，你可以試試這個。

export const googleLogin = (data: any) => {
  return axios.post("/login/google", data).then(({ data }) => data as any);
};

const [email, setEmail] = useState<string>("");
const { mutate, isLoading, isError } = useMutation(googleLogin, {
  onError(error: AxiosError) {
    setEmail("hi isError");
  },
});

useEffect(() => {
  if (isError) {
    console.log(email);
  }
}, [isError, email]);

function handleSocialLogin(event: React.MouseEvent<HTMLElement> & any) {
  mutate({
    clientIp: "hi",
  });
}

return <button onClick={handleSocialLogin}>button</button>;