在其他axios函数内部使用axios

Question

我找不到更好的标题来回答我的问题，但事情是这样的。因此，我为我的登录创建了一个自定义钩子，如下所示：

useLogin.js

import React from "react";
import axios from "axios";
import Cookies from "js-cookie";
import { useNavigate } from "react-router";
import useGetUserImage from "hooks/useGetUserImage/useGetUserImage";
export const useLogin = () => {
  const [userName, setUserName] = React.useState();
  const [password, setPassword] = React.useState();
  const [snack, setSnack] = React.useState(false);
  const [zoom, setZoom] = React.useState(false);
  const navigate = useNavigate();
  const cookieFn = (data) => {
    Cookies.set("user", JSON.stringify(data), {
      path: "/",
      expires: 3,
      sameSite: "strict",
      secure: window.top.location.protocol === "https:",
    });
  };
  const { ImageFetchingHandler } = useGetUserImage();
  const HandleLogin = (e) => {
    e.preventDefault();
    if (Boolean(userName) && Boolean(password))
      axios
        .post(`${process.env.REACT_APP_API_URL_API_LOGIN}`, {
          softWareOrUser: false,
          userName: userName,
          password: password,
        })
        .then((r) => {
          if (r.data.resCode === 1) {
            ImageFetchingHandler(r.data);
            cookieFn(r.data.Data);
            setSnack(false);
          } else {
            setSnack(true);
          }
        })
        .then(() => {
          navigate({ pathname: "/main" });
        })

        .catch((e) => {
          throw new Error(e.message);
        });
    else {
     alert("fill empty fields");
    }
  };
  return {
    HandleLogin,
    snack,
    zoom,
    setUserName,
    setPassword,
    setZoom,
    setSnack,
  };
};

如您所见，在我的useLogin.js中还有一个名为useGetUserImage的钩子。

我需要获得用户图像，无论何时我登录，并获得更多的令牌，但有两个问题。

首先，因为我会收到一个base64文本，我会有延迟。

第二，我要在登录后马上打电话。这将导致img标记中的错误。因为在我得到我的src之前，base64将是未定义的。

这是我的useGetUserImage

import axios from "axios";
import Cookies from "js-cookie";
const useGetUserImage = () => {
  const ImageFetchingHandler = ({ token }) => {
    axios({
      method: "post",
      url: `${process.env.REACT_APP_API_URL_API_FETCH_IMAGE}`,
      headers: {
        Authorization: `Bearer ${token}`,
        "Content-Type": "application/json",
        "DotNet-Timeout": 30000,
      },
      data: JSON.stringify({
        id: "4",
      }),
    }).then((d) => {
      Cookies.set("userImage", JSON.stringify(d.data), {
        path: "/",
        expires: 3,
        sameSite: "strict",
        secure: window.top.location.protocol === "https:",
      });
    });
  };
  return { ImageFetchingHandler };
};

export default useGetUserImage;

有办法解决这个问题吗？

我试图将这样的东西添加到我的mainpage.js中，但是它没有起作用。由于某种原因，它通过了我的条件，尽管当userImage未定义时

  React.useEffect(() => {
    if (
      Cookies.get("user") === undefined ||
      Cookies.get("userImage" === undefined)
    ) {
      navigate({ pathname: "/Login" });
    } else {
      console.log(Cookies.get("userImage"));
      setuserImage(JSON.parse(Cookies.get("user")));
    }
  }, [navigate]);

我的意思是userImage还没有定义，但是它会变成else块

Answer 1

我不认为cookie应该是图像的主要来源，它应该是一个状态。然后，与其将其写入cookie，不如将其写入状态。现在，当您接收到图像时，应用程序的必要部分将被更新，如果您将图像写入cookie，则无法真正做到这一点。使用这种方法，您可以编写一个useEffect，它可以尝试在启动时读取cookie并使用它启动状态，并且可以在每次cookie发生变化时编写一个将其写入cookie的useEffect。

另外两种想法：

Cookies.get("userImage") === undefined

• useGetUserImage
• 您在useEffect中有一个错误的)：Cookies.get("userImage" === undefined) vs )不是钩子，因为它没有使用任何其他钩子。它只是一个普通的函数，您可以像使用它一样使用它，但是为了避免混淆，您可能应该将它称为getUserImage或类似的东西。