2024.09.04

게시물 수정

로그인 된 유저는 자신이 쓴 게시물만 수정&삭제가 가능하다

 

 

수정

Detail페이지 게시물 수정 버튼 클릭 시 → EditForm페이지 이동 →  인풋에 기존 게시물에 있던 데이터 채우기 → 취소 버튼 클릭 시 돌아가기 () => navigate(-1)  →  수정 버튼 클릭 시 수정된 Detail페이지로 이동

 

 

 

수정&삭제 버튼 띄우기

로그인 된 유저 아이디와 게시물 작성자 아이디와 비교

맞지 않으면 null, 맞으면 수정&삭제 버튼

 

 

 

 

수정 클릭 시 EditForm페이지 기존데이터 불러오기

 const [post, setPost] = useState(null);
  
useEffect(() => {
        const fetchPostData = async () => {
            const { data, error } = await supabase.from("STARTIFY_DATA").select("*").eq("id", postId);

            if (error) {
                console.log("error => ", error);
            } else {
                console.log("data => ", data[0]);
                setPost(data[0]);
            }
        };

        fetchPostData();
    }, [postId]);

    const [postTitle, setPostTitle] = useState(post.postTitle);
    const [title, setTitle] = useState(post.title);
    const [youtubeLink, setYoutubeLink] = useState(post.url);
    const [desc, setDesc] = useState(post.desc);
    const [name, setName] = useState(post.name);
    const [hashtag, setHashtag] = useState("");
    // 해시태그를 담을 배열
    const [hashArr, setHashArr] = useState(post.hashtag);
    const [selectedSeason, setSelectedSeason] = useState(post.genre);

이렇게 코드를 짜니 post가 null이라 undefind 오류가 떴다

fetchPostData를 통해 post 데이터가 불러와진 후에 상태를 업데이트 하도록 한다

(상태 업데이트 →  불러와진 데이터로 초기화)