-
질문 & 답변
카테고리
-
세부 분야
풀스택
-
해결 여부
미해결
상세페이지에서 get이 안되는 경우
21.10.27 20:02 작성 조회수 500
1
postman으로 테스트 했을 때 product/${id} db가 잘 불러와지는데 index.js/product파일에서는 products가 null에 머물러있습니다..
import { useParams } from "react-router-dom";
import axios from "axios";
import { useEffect, useState } from "react";
import "./index.css"
function ProductPage() {
const { id } = useParams();
const [products, setProduct] = useState(null);
useEffect(function () {
axios.get(`https:/localhost:8080/products/${id}`).then(
function (result) {
setProduct(result.data.products);
console.log(result);
}
).catch(
function (error) {
console.log(error);
}
)
}, [id]);
if (products === null) {
return <h1>값을 받아오는 중입니다...</h1>
}
return (
<div>
<div id="image-box">
<img src={"/" + products.imageUrl} alt="product-img" />
</div>
<div id="profile-box">
<img src="/images/icons/avatar.png" alt="seller-img" />
<span>{products.seller}</span>
</div>
<div id="contents-box">
<div id="name">{products.name}</div>
<div id="price">${products.price}</div>
<div id="create-at">생성된 날짜가 들어갈예정: 2020.1.1.</div>
<div id="discription">{products.description}</div>
</div>
</div>
);
}
export default ProductPage;
답변을 작성해보세요.
1
그랩
지식공유자2021.10.27
https:localhost -> http://localhost로 변경해보시겠어요?
현재 node.js 서버는 https 프로토콜 설정이 따로 되어있지 않기 때문에 http 프로토콜로만 접근이 가능합니다 :)
0
0
김도토리
질문자2021.10.28
localhost: 8080 / products / 3 에서 이런 데이터들이 보이는데
react를 실행시켜서 localhost: 3000 / products / 3 에 접속하면 404에러가 뜨는데 왜그럴까요...
import { useParams } from "react-router-dom";
import axios from "axios";
import { useEffect, useState } from "react";
import "./index.css"
function ProductPage() {
const { id } = useParams();
const [product, setProduct] = useState(null);
useEffect(function () {
axios.get(`http:/localhost:8080/products/${id}`).then(
function (result) {
setProduct(result.data.product);
console.log(result);
}
).catch(
function (error) {
console.log(error);
}
)
}, [id]);
if (product === null) {
return <h1>값을 받아오는 중입니다...</h1>
}
return (
<div>
<div id="image-box">
<img src={"/" + product.imageUrl} alt="product-img" />
</div>
<div id="profile-box">
<img src="/images/icons/avatar.png" alt="seller-img" />
<span>{product.seller}</span>
</div>
<div id="contents-box">
<div id="name">{product.name}</div>
<div id="price">${product.price}</div>
<div id="create-at">생성된 날짜가 들어갈예정: 2020.1.1.</div>
<div id="discription">{product.discription}</div>
</div>
</div>
);
}
export default ProductPage;
그랩
지식공유자2021.10.28
에러 내용을 먼저 확인해보시면 좋을 것 같아요. 지금 붉은 색 쳐져있는 것 보면 제대로 된 URL이 아니죠?
axios.get 에 http:/localhost 이렇게 슬래시/ 가 1개만 쳐져있어서 URL을 제대로 인식하지 못하고 있네요
0
콘솔창에서는 프로토콜에러라고 뜨는데 어느부분의 문제인지 모르겠습니다...
답변 4