PostRead.js

import { useNavigate } from 'react-router-dom';
import { useParams } from 'react-router-dom';
import React, { useEffect, useState, useContext} from 'react';
import Article from '../components/Article.js';
import { UserContext } from '../Context.js';
import MapLocator from '../components/MapForLoaction.js';


import axios from 'axios';
axios.defaults.withCredentials = true;

function PostRead() {
    let params = useParams();
    const userContext = useContext(UserContext);
    const [article, setArticle] = useState(null)
    const navigate = useNavigate();
    function MoveTo(link){
      navigate(link)
    }	
    useEffect(() => {
      userContext.CheckSession()
      .then((response) => {
          if (!response.data) {
              alert("세션이 만료되었습니다. 다시 로그인 바랍니다.")
              MoveTo('/login')
           } 
           else{
            return requestLoadArticleById(params.id)
           }
        })
        .then((response) => {
          console.log(response)
          setArticle(response.data)
        })
        .catch((response)=>{
          console.log("error!:LogOut")
          console.log(response)
        })

    }, []);  



    console.log(article);
    console.log(article?Object.values(article):"no");
    if (article) {
      return(
        <div className="App" >
            <div className="introduction" style={{display: 'flex'}}>
              <MapLocator loc={{lat: article.latitude, lng: article.longitude}} keyword={article.keyword}></MapLocator>
              <Article data={Object.values(article)}></Article>
            </div>
            댓글창, 댓글쓰기, 조와요 누르기
            포스트 내용
            <p>현재 페이지의 파라미터는 { params.id } 입니다.</p>
        </div>)
    }
    else {
      return(
        <div className="App">
          <h1>포스트 페이지</h1>
            <div className="introduction" style={{display: 'flex'}}>
              <p>로딩준</p>
            </div>
        </div>)
    }

    ;
  }

  async function requestLoadArticleById(id) {
    const response = await axios({
      url: `http://localhost:8080/post/loadarticle/${id}`, // 통신할 웹문서
      method: 'get', // 통신할 방식
    });
    return response;
    }

  export default PostRead;