인프런 커뮤니티 질문&답변
작성한 질문수
Cannot read properties of undefined (reading 'map') TypeError: Cannot read properties of undefined (reading 'map') 에러 해결 어떻게 하나요?
작성
·
44
0
현재 [그랩마켓] React로 웹 개발하기 -2 듣고 있는데요,
1.
그랩 선생님 소스 코드와 동일하게 아래 작성한 index.js 소스 첨부하는데요,
실행하면,
1초 동안 잠깐 판매되는 상품들 이미지 없이 전체 페이지 뜨다 바로 아래 첨부한 그림과 같이
에러가 발생 합니다.
이 에러는 어떻게 해결 할 수 있을까요?
--------
2. index.js 소스 아래에 작성 첨부 합니다.
import './index.css';
import axios from "axios";
import React from 'react';
function MainPage(){
const [products, setProducts]=React.useState([]);
React.useEffect(
function(){
axios.get("이곳에는 제 mock 목 서버 주소를 넣었습니다/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={product.imageUrl} />
</div>
<div className="product-contents">
<span className="product-name">{product.name}
</span>
<span className="product-price">{product.price}원
</span>
<span className="product-seller">
<img className="product-avatar" src="../images/icons/avatar.png" />
<span>{product.seller}</span>
</span>
</div>
</div>
);
})
}
</div>
</div>
<div id="footer"></div>
</div>
);
}
export default MainPage;질문 하기 전 , 인프런 질문 올라와서 답변 올라온 것 다 적용해 보아도 해결이 안되어 이렇게 여쭈어 보게
되었습니다.
무엇이 문제인지, 그리고 해결 방법은 무엇인지 알려 주시면 고맙겠습니다.
답변 2
0
위에 AI 인턴이 대답한 것처럼 처음에는 products라는 state가 빈 배열 [] 로 들어가있지만 axios를 통해 네트워크 통신이 일어나게 되면 setProducts가 불립니다. 그때 state인 products가 업데이트가 되는데 이게 undefined가 되다보니 {undefined}.map 으로 호출되서 에러가 발생합니다!
보통 이는 postman 서버에서 제대로된 응답을 안주기 때문이고 응답을 잘주는지 확인을 먼저 해봐도 좋을 것 같습니다. 해당 mock 서버 주소를 브라우저 창에서 입력했을 때 값이 잘 들어오는지 먼저 테스트해보셔도 좋을 것 같아요!
0
안녕하세요, 인프런 AI 인턴입니다. isbcom1004님.
주어진 에러 메시지 “Cannot read properties of undefined (reading ‘map’)“는 JavaScript에서 undefined인 값에 map 함수를 호출하려고 할 때 발생하는 에러입니다. 이는 일반적으로 데이터가 비동기적으로 로드되어야 하는 상황에서 데이터가 아직 준비되지 않았을 때 발생할 수 있습니다.
이 에러를 해결하기 위해 다음과 같은 점을 확인해 보시기 바랍니다:
데이터 형식 확인:
axios.get요청을 통해 가져온result.data.products가 배열인지 확인해야 합니다. 서버로부터 올바른 형식의 데이터가 응답되고 있는지 Postman 등을 사용하여 확인해보세요.데이터 초기화:
React.useState([])는products를 빈 배열로 초기화합니다. 따라서, 서버 응답이 완료되기 전까지는 기존 값(빈 배열)로map함수를 사용하는 것입니다. 그러나 서버 응답이undefined를 반환한 경우가 문제이므로 이를 확인해야 합니다.데이터 요청 URL 확인: API 엔드포인트가 올바른지, 실제로 결과를 반환하는지 확인해보세요. “이곳에는 제 mock 목 서버 주소를 넣었습니다/products” 부분이 올바르게 작동하고 있는지 점검하십시오.
에러 발생 시 조치: 예외 처리를 통해 에러 발생 시 빈 배열을 할당하거나
products를 초기화 reset해보십시오. 예를 들면:.catch(function(error){ console.error("에러 발생:", error); setProducts([]); // 또는 다른 조치를 취함 });
자세한 제한 없이 미리 해결된 유사 질문들을 통해 추가 방법을 찾을 수 있습니다:
- TypeError: Cannot read properties of undefined (reading ‘map’) 해결 방법
- 서버 데이터 문제로 인한 map 함수 에러 고치기
- React 데이터 바인딩과 undefined 에러 처리
저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.
TypeError: Cannot read properties of undefined (reading ‘map’) 해결 방법
React 데이터 바인딩과 undefined 에러 처리
위 해결책의 코멘트와 답변 대로 수정해 보아도 에러가 해결 되지 않았습니다.
어떻게 해결 해야 하는지요?
그랩님, 좋은 강의 만들어 주셔서 잘 듣고 있습니다.
재 질문 답변 부탁드립니다.
현재 postman을 실행하고요, 제 해당 목 mock 서버 주소를 입력 후 끝에 /products까지
하면요, 아래와 첨부한 사진과 같이 잘 데이터를 받아오는 것 같은데요, 위에 에러 화면이 그대로 표시되어 어떻게 해결해야 하는지 방법을 모르겠습니다. 조금 구체적으로 어떻게 해결햐야 하는지 단계별로 친절한 설명 부탁드립니다.