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 axios from 'axios'; axios.defaults.withCredentials = true; function PostRead() { let params = useParams(); const userContext = useContext(UserContext); const [article, setArticle] = useState(null) useEffect(() => { requestLoadArticleById(params.id) .then((response) => { console.log(response) setArticle(response.data) }) }, []); console.log(article); console.log(article?Object.values(article):"no"); if (article) { return( <div className="App"> <h1>포스트 페이지</h1> <div className="introduction"> 포스트 내용 <p>현재 페이지의 파라미터는 { params.id } 입니다.</p> <Article data={Object.values(article)}></Article> </div> </div>) } else { return( <div className="App"> <h1>포스트 페이지</h1> <div className="introduction"> 포스트 내용 <p>현재 페이지의 파라미터는 { params.id } 입니다.</p> <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;