게시판 상세페이지 접속시 자동 글 삭제 오류

게시판에 글을 작성하고 접속하면 반짝하더니 작성된 글이 사라지는 문제가 발생했다.

아니 왜 자꾸 지워지는거지;

 

조건문도 달아보고 함수도 바꿔보고  했지만 Delete 함수를 아예 호출도 안한다.

호출하기도 전에 지워져버리니 호출할 글이 없어서 페이지 자체가 존재하지않으니까 작동을 안하는거같다.

어딘가에서 페이지가 접속할 때 자동으로 지우는거같은데..

반짝하고 지우는게 useEffect와 관련이 있을거같다.

확인해보니 AxiosDelete가 useEffect로 url이 변경될때마다 실행되도록 되어있었다.

 

기존의 코드

import { useState, useEffect } from "react";
import axios from "axios";

const useAxiosDelete = (url) => {
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);
  const accesstoken = localStorage.getItem("access-token");
  const token = accesstoken ? accesstoken.replace("Bearer ", "") : "";

  useEffect(() => {
    setLoading(true);
    axios
      .delete(url, {
        headers: {
          Authorization: `Bearer ${token}`,
        },
      })
      .then((res) => {
        setLoading(false);
        window.location.reload();
      })
      .catch((err) => {
        setError(err);
        setLoading(false);
      });
  }, [token]);

  return { error };
};

export default useAxiosDelete;

 

수정된 코드

import { useState, useCallback } from "react";
import axios from "axios";
import { useNavigate } from "react-router-dom";

const useAxiosDelete = (url) => {
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState(null);
  const accesstoken = localStorage.getItem("access-token");
  const token = accesstoken ? accesstoken.replace("Bearer ", "") : "";
  const navigate = useNavigate();

  const deleteRequest = useCallback(() => {
    setLoading(true);
    return axios
      .delete(url, {
        headers: {
          Authorization: `Bearer ${token}`,
        },
      })
      .then((res) => {
        setLoading(false);
        navigate(-1);
        return res.data;
      })
      .catch((err) => {
        setError(err);
        setLoading(false);
        throw err;
      });
  }, [url, token]);

  return { deleteRequest, loading, error };
};

export default useAxiosDelete;

 

 

axios 저렇게 쓰는게 아니였는데 그저 부끄럽다