인프런 커뮤니티 질문&답변
작성한 질문수
상세보기를 누르면 널값이라고 계속나옵니다
작성
·
245
1
별짓다해봤는데 뭐가 문제인지 잘모르겠습니다 ..
한번 확인부탁드립니다!
product index.js
import { useParams } from "react-router-dom";
import axios from "axios";
import { useEffect, useState } from "react";
function ProductPage() {
const { id } = useParams();
const [product, setProduct] = useState(null);
useEffect(function () {
axios
.get(
`https://3fdc9398-b155-42b8-9304-e33318eb3d55.mock.pstmn.io/products/ + ${id}`
)
.then(function (result) {
setProduct(result.data);
console.log(result);
})
.catch(function (error) {
console.error(error);
});
}, []);
return (
<div>
<div id="image-box">
<img src={"/" + product.imageUrl} />
</div>
<div id="profile-box">
<img src="/images/icons/avatar.png" />
<span>{product.seller}</span>
</div>
<div id="contents-box">
<div id="name ">{product.name}</div>
<div id="price">{product.price}원</div>
<div id="description">{product.description}</div>
</div>
</div>
);
}
export default ProductPage;
답변 1
1
그랩
지식공유자
상품 페이지에 들어갔을 때 product state가 null로 들어가있기에 있는 이슈입니다.
상품 페이지에서 개발자도구 console 창을 켜서 제대로 api 서버와 네트워크 통신이 되었는지 확인해주세요 :)