Cannot read properties of undefined (reading 'map') TypeError: Cannot read properties of undefined (reading 'map') 에러 해결 어떻게 하나요?

현재 [그랩마켓] 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

그랩

2025-07-05T03:38:59.823Z

위에 AI 인턴이 대답한 것처럼 처음에는 products라는 state가 빈 배열 [] 로 들어가있지만 axios를 통해 네트워크 통신이 일어나게 되면 setProducts가 불립니다. 그때 state인 products가 업데이트가 되는데 이게 undefined가 되다보니 {undefined}.map 으로 호출되서 에러가 발생합니다!

보통 이는 postman 서버에서 제대로된 응답을 안주기 때문이고 응답을 잘주는지 확인을 먼저 해봐도 좋을 것 같습니다. 해당 mock 서버 주소를 브라우저 창에서 입력했을 때 값이 잘 들어오는지 먼저 테스트해보셔도 좋을 것 같아요!

0

isbcom1004

2025-07-08T05:50:52.940Z

그랩님, 좋은 강의 만들어 주셔서 잘 듣고 있습니다.
재 질문 답변 부탁드립니다.

현재 postman을 실행하고요, 제 해당 목 mock 서버 주소를 입력 후 끝에 /products까지
하면요, 아래와 첨부한 사진과 같이 잘 데이터를 받아오는 것 같은데요, 위에 에러 화면이 그대로 표시되어 어떻게 해결해야 하는지 방법을 모르겠습니다. 조금 구체적으로 어떻게 해결햐야 하는지 단계별로 친절한 설명 부탁드립니다.

 

0

인프런 AI 인턴

2025-07-04T18:51:26.168Z

안녕하세요, 인프런 AI 인턴입니다. isbcom1004님.

주어진 에러 메시지 “Cannot read properties of undefined (reading ‘map’)“는 JavaScript에서 undefined인 값에 map 함수를 호출하려고 할 때 발생하는 에러입니다. 이는 일반적으로 데이터가 비동기적으로 로드되어야 하는 상황에서 데이터가 아직 준비되지 않았을 때 발생할 수 있습니다.

이 에러를 해결하기 위해 다음과 같은 점을 확인해 보시기 바랍니다:

1. 데이터 형식 확인: axios.get 요청을 통해 가져온 result.data.products가 배열인지 확인해야 합니다. 서버로부터 올바른 형식의 데이터가 응답되고 있는지 Postman 등을 사용하여 확인해보세요.

2. 데이터 초기화: React.useState([])는 products를 빈 배열로 초기화합니다. 따라서, 서버 응답이 완료되기 전까지는 기존 값(빈 배열)로 map 함수를 사용하는 것입니다. 그러나 서버 응답이 undefined를 반환한 경우가 문제이므로 이를 확인해야 합니다.

3. 데이터 요청 URL 확인: API 엔드포인트가 올바른지, 실제로 결과를 반환하는지 확인해보세요. “이곳에는 제 mock 목 서버 주소를 넣었습니다/products” 부분이 올바르게 작동하고 있는지 점검하십시오.

4. 에러 발생 시 조치: 예외 처리를 통해 에러 발생 시 빈 배열을 할당하거나 products를 초기화 reset해보십시오. 예를 들면:

   .catch(function(error){
      console.error("에러 발생:", error);
      setProducts([]); // 또는 다른 조치를 취함
   });
   

자세한 제한 없이 미리 해결된 유사 질문들을 통해 추가 방법을 찾을 수 있습니다:

• TypeError: Cannot read properties of undefined (reading ‘map’) 해결 방법
  
• 서버 데이터 문제로 인한 map 함수 에러 고치기
  
• React 데이터 바인딩과 undefined 에러 처리
  

저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.

0

isbcom1004

2025-07-12T02:39:44.030Z

• TypeError: Cannot read properties of undefined (reading ‘map’) 해결 방법

• 서버 데이터 문제로 인한 map 함수 에러 고치기

• React 데이터 바인딩과 undefined 에러 처리
  위 해결책의 코멘트와 답변 대로 수정해 보아도 에러가 해결 되지 않았습니다.
  어떻게 해결 해야 하는지요?