섹션3 목록처리(2) - 동일페이지 클릭 처리 부분에서 오류가 나... - 인프런

코드로 배우는 React with 스프링부트 API서버

목록처리(2)-동일 페이지 클릭 처리

섹션3 목록처리(2) - 동일페이지 클릭 처리 부분에서 오류가 나서 문의드립니다.

작성

206

import React from "react";


// 게시판 아래 페이징 처리 1페이지 2페이지 3페이지 <<prev page, next page>>
function PageComponent({serverData, movePage}) {

    //serverData.prev, pageNumList, next
    return (
        <div className='m-6 flex justify-center'>
            
            {/* 이전 데이터가 있다면 이전페이지로 이동할 수 있게끔 만드는 기능*/}
            {serverData.prev ?
                <div 
                    className='m-2 p-2 w-16 text-center font-bold text-blue-400'
                    onClick={ () => movePage({page:serverData.prevPage} )}
                >
                    Prev 
                </div> : <></>
            }
        
            {/* 페이징 번호 순서대로 출력 */}
            {serverData.pageNumList.map(pageNum =>
                <div 
                    key={pageNum}
                    className={ `m-2 p-2 w-12 text-center rounded shadow-md text-white
                    ${serverData.current === pageNum? 'bg-grev-500':'bg-blue-400'}`}
                    onClick={ () => movePage( {page:pageNum}) }>
                    {pageNum}
                </div>
            )}

            {/* 마지막 next */}
            {serverData.next ?
                <div 
                    className='m-2 p-2 w-16 text-center font-bold text-blue-400'
                    onClick={ () => movePage( {page:serverData.nextPage} )}>
                    Next
                </div> : <></>
            }
        </div>   
    );
}

export default PageComponent;

이렇게 입력을 똑같이 했는데 

Prev </div> : <></> 이쪽 코드에서 

아래 에러메세지가 발생을 하는데요 저만 이런건가요 ㅠ 서버쪽은 문제가 아니라고 구글링 해보니까 그러는데 여기서 뭐가 문제인지 도저히 모르겠습니다 ㅠ

Uncaught TypeError: Cannot read properties of undefined (reading 'map')

react spring-boot jpa jwt redux-toolkit

답변 2

구멍가게코딩단

지식공유자

에러의 원인은 Props로 전달받는 serverData이 온전하지 않아서 생기는 문제입니다.

우선 컴포넌트에 <></>만 출력하게 하시고..

컴포넌트에서 console.log(serverData)를 찍어 보면 데이터가 없으실 겁니다.

서버에서 데이터가 전달되고 이 데이터가 serverData 가 되는 것이라..

혹시 서버와 통신에 문제가 없는지 확인해 주세요

인프런 AI 인턴

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

jkshin님의 질문과 유사한 문제를 경험하신 다른 수강생의 사례를 찾았습니다. Uncaught TypeError: Cannot read properties of undefined (reading 'map') 에러는 대개 map 함수를 호출하는 객체가 undefined라는 의미입니다. 이 경우, map 함수를 사용하기 전에 해당 객체가 정의되어 있는지 확인해야 합니다.

직접적으로 동일한 문제에 대한 답변을 찾지는 못했지만, 유사한 문제에 대한 대처 방법을 제공한 글이 있어 이를 참고하셔서 문제를 해결하시는 데 도움이 되실 것 같습니다.

TypeError: Cannot read properties of undefined (reading ‘map’)에 대한 문제에서는 map 함수를 사용할 때 발생할 수 있는 유사한 문제와 그 해결 방법에 대해 논의됩니다. 해당 수강자의 경우, 데이터를 성공적으로 가져오지 못하여 undefined가 된 상태에서 map 함수를 호출하려 했기 때문에 문제가 발생했습니다. 이를 해결하기 위해 데이터의 유효성을 검사하고, 예외 처리를 통해 안전하게 map 함수를 사용할 수 있는 방법이 제시되었습니다.

데이터가 제대로 전달되지 않아서 undefined로 인식되는 경우가 많으므로, serverData.pageNumList가 정의되었는지 확인하시는 것이 좋습니다. 아래와 같이 조건부 렌더링을 사용하여 pageNumList가 있을 때만 map 메소드를 사용하는 방식을 적용해볼 수 있습니다.

{serverData.pageNumList && serverData.pageNumList.map(pageNum =>
    <div key={pageNum} ...>
        {pageNum}
    </div>
)}

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

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

섹션3 목록처리(2) - 동일페이지 클릭 처리 부분에서 오류가 나서 문의드립니다.