-
질문 & 답변
카테고리
-
세부 분야
풀스택
-
해결 여부
미해결
상품상세페이지에서 잘 안됩니다.
21.11.26 17:14 작성 조회수 117
1
보시는것과 같이 이렇게 뜹니다
혹시 몰라 제가 입력한 코드도 함께 보여드립니다
보시고 틀린 부분은 꼭 가르쳐주세요!
상품 상세 페이지구현 2에서 헤더와 바디, 푸터 외에는 css는 아직 하지 않았습니다.
App.js
import './App.css';
import MainPageComponent from "./main/index.js";
import {Switch, Route} from "react-router-dom";
import UploadPage from './upload';
import ProductPage from './product';
function App() {
return (
<div>
<div id="header">
<div id="header-area">
<img src="/images/icons/logo.png" />
</div>
</div>
<div id="body">
<Switch>
<Route exact={true} path="/">
<MainPageComponent />
</Route>
<Route exact={true} path="/products/:id">
<ProductPage />
</Route>
<Route exact={true} path="/upload">
<UploadPage />
</Route>
</Switch>
</div>
<div id="footer"></div>
</div>
);
}
export default App;
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://361064f0-c286-4d2b-9664-2d0715b5a18f.mock.pstmn.io/products/${id}`)
.then(function(result){
setProduct(result.data);
}).catch(function(error){
console.error(error);
})
},[])
if(product===null){
return <h1>상품 정보를 받고 있습니다...</h1>
}
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>
);
}
export default ProductPage;
main/index.js
import React from "react";
import "./index.css";
import axios from "axios";
import {Link} from "react-router-dom";
function MainPage(){
const [products, setProducts] = React.useState([]);
React.useEffect(
function(){
axios.get( "https://361064f0-c286-4d2b-9664-2d0715b5a18f.mock.pstmn.io/products").then(function(result){
console.log(result)
const products = result.data.products;
setProducts(products);
}).catch(function(error){
console.error("에러발생 : ", error)
})
},[])
return (
<div>
<div id="banner">
<img src="images/banners/banner1.png" />
</div>
<h1>판매되는 상품들</h1>
<div id="product-list">
{products.map(function(product, index){
return(
<div className="product-card">
<Link className="product-link" to={`/products/${product.id}`}>
<div>
<img className="product-img" src={product.imageUrl} />
</div>
<div className="product-contents">
<span className="product-name">
{product.name}
</span>
<span className="product-price">
{product.price}원
</span>
<div className="product-seller">
<img className="product-avatar" src="images/icons/avatar.png" />
<span>{product.seller}</span>
</div>
</div>
</Link>
</div>
)
})
}
</div>
</div>);
}
export default MainPage;
답변을 작성해보세요.
0
그랩
지식공유자2021.11.27
현재 Mock API 서버를 확인해보니 JSON 형식에 맞지 않게 응답을 보내는 것 같아요
그래서 API 응답 결과를 화면으로 보여주는 과정에서 데이터가 없는 것으로 보이구요.
imageUrl: ... 끝에 ,를 붙여주셔야 합니다. json은 key:value에 마지막을 제외하고는 ,를 꼭 붙여주셔야 합니다!
https://361064f0-c286-4d2b-9664-2d0715b5a18f.mock.pstmn.io/products/1
답변 1