인프런 커뮤니티 질문&답변
작성한 질문수
TypeError: Cannot read property 'map' of undefined
작성
·
330
2
에러 타입만 봐서는 map을 적용한 products 값이 정의되지 않았다는 뜻같은데 아래는 작성한 코드입니다.
import React from "react";
import "./index.css";
import axios from "axios";
function MainPage() {
const [products, setproducts] = React.useState([]);
React.useEffect(function () {
axios
.get(
"https://3284f26f-91b1-4e10-8812-f3d402e87bb1.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">
<div>
<img
className="product-img"
src="images/products/keyboard1.jpg"
/>
</div>
<div className="product-contents">
<span className="product-name">키보드</span>
<span className="product-price">50000원</span>
<span className="product-seller">
<img
className="product-avatar"
src="images/icons/avatar.png"
/>
<span>그랩</span>
</span>
</div>
</div>
);
})}
</div>
</div>
<div id="footer"></div>
</div>
);
}
export default MainPage;
아래는 크롬 로컬호스트에 나오는 부분 캡쳐입니다.
그리고 아래는 postman에서 send 이후 받은 결과값입니다.
{
"products" :[
{
"name": "농구공",
"price": 10000,
"seller": "조던",
"imageUrl": "images/products/basketball1.jpeg",
},
{
"name": "축구공",
"price": 50000,
"seller": "메시",
"imageUrl": "images/products/soccerball1.jpg",
},
{
"name": "키보드",
"price": 15000,
"seller": "그랩",
"imageUrl": "images/products/keyboard1.jpg",
},
];
}
확인 부탁드립니다.
답변 1
1
그랩
지식공유자
지금 문제가 있는 이유는 postman에서 response해줄 json 값에 오타가 있어서 클라이언트(react)에서 정상적으로 데이터를 못받아오고 있네요.
"imageUrl" 줄의 맨 마지막에 콤마(,)를 다 지워주시곘어요?(json에서는 객체의 마지막 라인에는 콤마를 적으면 오류가 발생합니다)
그리고 3번째 객체의 마지막 }에도 콤마(,)가 있으며 array의 마지막 ]에 세미콜론을 제거해주셔야 합니다.
해결되었습니다.
감사합니다~!