카테고리

질문 & 답변
세부 분야

풀스택
해결 여부

미해결

json 에 있는 데이터들을 map 으로 출력 할 떄 만약 상품마다 데이터가 null 값이라면 어떻게 출력..

21.10.28 16:01 작성 조회수 215

안녕하세요 제로초님.

다름이 아니라 제가 react 환경에서 json 에 있는 데이터들을 뽑아 가져와서 

react jsx 에서 데이터들을 출력하고 싶은데, 

제가 강의를 듣고 배웠던 내용으로 신발 쇼핑몰을 만들 고 있습니다.

예로 들면 신발 제품들 중에서 나이키 에어포스라는 신발이 있는데,

신발 상세 페이지에서 신발 상품이 몇 켤레 있는 지 나옵니다.

예로 들면 3개면 3 켤레 장고 남았다고 출력하도록 나오고.

그 신발이 다 팔려 버려서 데이터가 null 값으로 나옵니다. (신발 마다 장고가 있는 상품이 있고 없는 상품이 있음) 

그러면 제가 신발 상세 페이지에서 JSX 문법에서

{ProductDetail && ProductDetail.Nike.map(List => (

<li key={List.id}>{List.displayText} </li>

))}

이런 식으로 상세 페이지를 만들어 놓았는데.

(displayText 가 신발 몇 켤레 있는 지 data 입니다.)

근데 만약에 displayText 가 null 값으로 있다면? 그 displayText 가 null 값인 신발 상세 페이지로 들어가면 에러가 나옵니다.

displayText data 가 들어 있는 상세 페이지는 정상적으로 들어가 지고..

근데 제가 이 displayText 가 null 인 즉, 신발 장고가 없는 상세 페이지들은

장고가 없으면 -> displayText( 몇 켤레 남았는 지 데이터) 위치에 <p>신발 품절 입니다. </p> 이렇게 출력하고 싶습니다.

고민 해 보았지만 하지만 어떻게 해 줘야 할 지 모르겠습니다.

[리뉴얼] React로 NodeBird SNS 만들기

답변 1

답변을 작성해보세요.

조현영

지식공유자

2021.10.28

저 부분이 문제가 아니라 신발 상세 페이지가 문제일 겁니다. 아래 같은 식으로 하면 됩니다.

{displayText ? {displayText} : 신발 품절입니다.}

김수민

질문자

2021.10.28

{ProductDetail && ProductDetail.Nike[0].map(List => (

<li key={List.id}>{List.displayText ? <p>{List.displayText}</p> : <p>신발 품절입니다.</p>} </li>

))}

TypeError: Cannot read properties of undefined (reading '0')

에러가 나오네요 ㅠㅠ

아 참고로 key값은 꼭 있어야 합니다! 

array 로 되어 있어서 

아 그리고 제로초님

제가 localhost:3000/product/1, localhost:3000/product/2, localhost/product/3

이런 식으로 제품 목록 페이지는 안 만들고 도메인에서 product 입력 해 제품 상세 페이지들만 들어갈 수 있게 만들려고 하는 데.

제품 상세 페이지 들어가면 예시)-> product/1, product/2, product/3

지금은 일단 제품 목록 70 개중 -> 4개만 배열로 추출 해서 메인 페이지에 뿌리고

그 배열 id 값 4개의 배열을 클릭해서 들어가면 -> 동적 라우터 id 값 받아서 동적 product/1 2 3 이런 식으로 들어가 집니다.

제가 지금 문제가 product/5,6,7 이 페이지들이 localhost:3000/product/5, product6 입력 하면 들어가지지 않습니다.

들어가게 되면 바로 localhost:3000 제가 메인 페이지 등록 해놓았던 페이지로 들어가게 됩니다.

그리고 또 ㅠㅠ..

메인 페이지에 있는 목록에 있는 4개의 배열 id 값을 클릭해서 상세 페이지는 들어가집니다.

근데 도메인에 직접 입력해서 localhost:3000/product/1, 2 들어 갈려고 하는 데.

입력해서 들어가게 되면 바로 메인 페이지로 넘어가지네요 왜 이러는 걸까요?? ㅠㅠㅠ

조현영

지식공유자

2021.10.29

저 에러메시지는 ProductDetail.Nike가 undefined라는 겁니다. ProductDetail.Nike?.[0] 하세요.

주소창에 localhost:3000/product/1 할 때는 들어가지나요?

김수민

질문자

2021.10.29

http://localhost:3000/product/8 입력해서 들어가면

바로 App.js 에서 Redirect 한 페이지 main -> localhost:3000/main 페이지로 넘어 가 집니다.

라우터는 지금 이런 식으로 되어 있습니다.

아 localhost:3000/product/8 에서 페이지 새로고침을 하면 바로 main 으로 자동으로 넘어 가 집니다.

     <Switch>
    <QueryClientProvider client={queryClient}> 여기는 React-Query(useQuery)
    <Redirect exact path="/" to="/main" />
    <Route path="/main" component={Main} />
    <Route path="/product/:id" component={Product} />
    </QueryClientProvider>
    </Switch>

Array를 제가 잘 못 봤습니다. 죄송합니다. 이렇게 수정 했는데,

{ProductDetail && ProductDetail.Brand.Nike?.map(List => (

<li key={List.id}>{List.displayText ? <p>{List.displayText}</p> : <p>신발 품절입니다.</p>} </li>

))}

Nick 는 Array 로 형성 되어 있고 

Array (0, 1, 2, 3, 4, 5, 6, 7) 

각 숫자 값들 마다 displayText 가 있습니다. 

제로초님 이런 식으로 변경 해 보았는데.

TypeError: Cannot read properties of undefined (reading '0')

크롬 F12 코드 보면 li 태그가 출력 되지 않고 있습니다.

조현영

지식공유자

2021.10.29

혹시 Product 컴포넌트에서 /로 redirect하는 부분이 있나요?

조현영

지식공유자

2021.10.29

그리고 li가 출력되지 않는 것은 그게 없기 때문입니다.

김수민

질문자

2021.10.29

redirect 는 없네요 ㅠㅠ 라우터부분 문제인 거 같은데 좀 더 찾아 보겟습니다.

간단히 쉽게 저거는 예시로 만든 건데.

제가 보니까 displayText 가 없는 데이터들은 Nike 안에 id 값이 없더라고요.

즉 나이키에 있는 상품들은 Array 가 있고 그 안에 id 값이 있는 것이고.

제가 월래 만들려고 했던 것은 신발 사이즈 부분인데.

신발 사이즈

Nick json 에서는 -> Info ( Array ) -> 0,1,2,3,4,5,6 이런 식으로 있습니다.

근데 제가 node에서 만들어놓은 json 에서는 퓨마 -> Info 에 들어가면 -> Array(0,1,2,3,4,5) 가 없으니까.

그 Array 값들 없으니까 오류가 나는 것이고, 오류대신 해당 삼품은 없습니다 이렇게 출력하고 싶었습니다.

ProductDetail.brand.퓨마.Info.map(Detail => (

<li key={Detail.id}>{Detail.DisplayText ? {Detail.displayText} : 해당 상품이 없습니다.}</li>

조현영

지식공유자

2021.10.29

상품이 존재하는 경우와, 존재하지 않는 경우의 객체 모양의 차이점을 파악하신 후, 그 차이점을 바탕으로 다르게 보여주시면 됩니다.

<li key={Detail.id}>{Detail.DisplayText ? {Detail.displayText} : 해당 상품이 없습니다.}</li>

이것도 문제가 될 것 같지는 않아보이는데요. DisplayText가 두 객체의 차이점이라면요.

근데 존재하지 않는데 객체가 있는 것이 맞나요?

[{존재}, {존재안함}, {존재}] 이런 건지

[{존재}, {존재}] 이런 건지

아예 없는건지 구부노디어야 합니다.

조현영

지식공유자

2021.10.29

Array값이 없다는게 아예 undefined인건지 []인건지도 중요합니다.

김수민

질문자

2021.10.31

[{존재}, {존재}] 이런 식으로 있지만.

존재 하지 않는다면 -> [ ] 빈 배열로 있습니다. 감사합니다. ㅎㅎ

아 그리고 제로초님 제가 신발 쇼핑몰 메인 페이지랑, 상세 페이지를 만들려고 하는데.

메인 페이지에서 상세 페이지로 이동하는 동적 Link를 안 만들고

상세 페이지로 이동하려면 직접 도메인을 입력 하도록

도메인 www.minshoes.com/1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14 이런 식으로 만들어 1/2/3/4 이런 식으로 도메인 직접 입력 해서 페이지 이동하는 형식으로 만들어 줄 려고 하는데,

기존에는 메인 페이지에서 신발 id 값 클릭해서 상세 페이지로 이동하는 방식으로 만들었는데,

그런 식으로 만들면 이 신발 목록 api post 요청을 어디서 해야 할 지 모르겠습니다.

조현영

지식공유자

2021.10.31

ProductDetail.brand.퓨마.Info?.length ? ProductDetail.brand.퓨마.Info.map(() => {
...
}) :상품이 없습니다

이런식으로 하면 됩니다.

api 요청은 신발 상세 페이지 useEffect에서 로딩하시면 됩니다. 다만 로딩 전 화면도 만드셔야겠죠

김수민

json 에 있는 데이터들을 map 으로 출력 할 떄 만약 상품마다 데이터가 null 값이라면 어떻게 출력..

이 글과 비슷한 Q&A

local storage

list컴포넌트 생성하기

flask, react 로 개발한 웹앱을 모바일로 접속시 이미지가 안나오는 오류

npm run dev 연결이 안됩니다ㅜㅜ