localhost:3000/products/undefined

비전공자를 위한 진짜 입문 올인원 개발 부트캠프

상품 상세 페이지 구현 - 1

작성

678

안녕하세요 그랩님

수업을 듣다가 막히는 부분이 생겨서 질문 남깁니다.

postman에서 products/1을 추가한 후에

Link부분을 ${index}에서 ${product.id}로 변경을 했더니

이렇게 undefined라고 나옵니다

코드와 postman을 다 검토해봤는데 뭐가 틀린건지 잘 모르겠습니다ㅠ

확인 한번만 부탁드립니다.

항상 감사합니다.

(postman에서 products 아래에 원래 products와 default 가 같이 있었는데 제가 하나만 남기고 싶어서 default를 삭제하고 products만 남겨뒀습니다. 혹시 그게 문제가 된거일 수도 있을까요?)

<div id="product-list">
{products.map(function (product, index) {
 return (
 <div className="product-card">
<Link className="product-link" to={`/products/${product.id}`}>
<div>

javascript HTML/CSS express react nodejs react-native 머신러닝 배워볼래요? tensorflow

답변 4

이한성

질문자

답변 감사합니다 그랩님!

이것저것 해보다가 해결을 하긴 했는데.. 이게 맞는방법인건지를 모르겠습니다

postman URL주소 제일 마지막에 / 를 넣었더니 해결이 됐습니다.

( 원래 코드에는

"https://xxxxxxxxx.mock.pstmn.io/products"로 기재를 했었는데

"https://xxxxxxxxx.mock.pstmn.io/products/"로 바꿨더니 수정 되었습니다.)

이렇게 해도 되는건가요..?

확인 한번만 부탁드립니다. 감사합니다!

그랩

지식공유자

잘 동작한다니 다행이에요. 이 부분은 포스트맨 내부적으로 오류가 있는 것으로 보입니다!

아무래도 포스트맨에서 mock server 자체가 main feature는 아니고 제약이 있다보니 사소한 버그들이 조금씩 있는 것 같네요 😂

그랩

지식공유자

코드 윗쪽에 useEffect 안에 setProducts(products) 코드가 있을거에요.

그 위에 console.log(products)를 통해 products 값이 어떻게 들어오는지 먼저 확인해주시겠어요?

그랩

지식공유자

const products = result.data.products

console.log("PRODUCTS : ", products)

setProducts(products)

요렇게 코드를 추가하시고 브라우저 개발자도구에서 로그를 확인해보시면 좋을 것 같아요.

지금 의심가는 부분은 products 변수에 데이터가 제대로 들어가 있지 않기에 setProducts를 통해 products라는 state에 값이 없고, 이에 products.map 이 부분이 제대로 동작하지 않는 것으로 보입니다.

이한성

질문자

안녕하세요 그랩님

useEffect안에 setProducts(products)코드는 찾았는데 그 다음 말씀해주신걸 어떻게 해야하는건지를 모르겠습니다ㅠㅠ

수업을 열심히 듣고있다고 생각했는데 아직 갈길이 먼듯하네요ㅠ

제가 어떻게 해야하는건지 설명해주실 수 있을까요ㅠㅠ?

(혹시 필요할지몰라 코드 전부다 올려봅니다ㅠㅠ)

감사합니다ㅠㅠ

import "./index.css";
import axios from "axios";
import React from "react";
import { Link } from "react-router-dom";

function MainPage() {
 const [products, setProducts] = React.useState([]);
 React.useEffect(function () {
 axios
 .get(
 "https://2f7bb40d-0885-4845-a2a9-85871c1cc2b0.mock.pstmn.io/products"
 )
 .then(function (result) {
 const products = result.data.products;
 setProducts(products);
 })
 .catch(function (error) {
 console.error("에러 발생 : ", error);
 });
 }, []);

 return (
 <div>
<div id="header">
<div id="header-area">
<img src="images/icons/logo.png" />
</div>
</div>
<div id="body">
<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-image" 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>
<div id="footer"></div>
</div>
 );
}

export default MainPage;

인프런 커뮤니티 질문&답변

localhost:3000/products/undefined