CODCODE
80
2020-01-25 01:19:38
4
281

쌩초보 리액트 map 질문입니다 ㅠㅠ 살려주세요 ㅠㅠ 이틀동안 삽질중입니다 ㅠㅠ


너무 생 초보라 죄송합니다 ㅠ

다름이아니라 지금 만들어보고 있는게,

db.json을 fetch 한 뒤, 그놈을 state에 넣고 상세 페이지를 그립니다.

json 안에 들은건

{
  "item": [
    {
      "image": "item_img1.jpg",
      "itemName": "다우니 퍼퓸 스노우",
      "underPrice": "20,000",
      "price": "30,000",
      "reviewCounter": "32",
      "id": 1,
      "option": ["하얀색", "검정색", "노란색"]
    }
  ]
}

이렇게 생겼습니다.

state에 저장되고 나서는 각 프로퍼티별 값을 가져와서

화면을 그리는데요,

이렇게 그려집니다.

그리고 저 오른쪽에 select 박스에

아까 db.json의 프로퍼티중


"option": ["하얀색", "검정색", "노란색"]

이놈을 map 으로 돌며

그안의 값들을 빼내서 option태그로 추가해주려고 했는데요..

계속 map을 찾을 수 없다고 오류가 뜨네요 ㅠㅠ


저 상세페이지가 select 컴포넌트의 부모라 option을 

select 에게 props로 넘겨주는데

select 컴포넌트에서 콘솔로 찍어보니 undefined 였다가 배열이 차더라구요

그래서 추측컨데 처음값이 undefined라 불러와지기전에

map을 돌아서 오류가 나는건가 싶은데

해결방법이 떠오르질 않습니다 ㅠㅠ 계속 한문제만 보니까

쉽게 해결할수있을것 같은데도 머리에 쥐만나네요 ㅠㅠㅠㅠㅠㅠ

혹시몰라 github 주소도 첨부합니다 ㅠㅠㅠ

너무 답답하네요 ㅠㅠㅠㅠㅠ 살려주세요 ㅠㅠ

깃허브

1
0
  • 답변 4

  • IT공부중
    204
    2020-01-25 02:55:01 작성 2020-01-25 02:59:53 수정됨

    그럼 option !== [] ? 맵 : null 

    이런식은 어떠세요


    아니면 option이 처음엔 아예 없는 값이면

    {option ? option.map ~~ : null} 이런식

    1
  • 여우비
    31
    2020-01-25 03:14:56

    코드를 읽어봤는데요.

    비동기에 대한 이해가 낮을 걸로 보이시며 리액트 라이프사이클을 공부하시길 추천드립니다.


    결론은 데이터를 받아오기도 전에 뷰를 그릴려고 했기 때문입니다.


    if(item.length === 0) return null;

    이런식으로 처리를 하시면 일단 오류는 피하실 수 있습니다.

    1
  • CODCODE
    80
    2020-01-25 04:07:38
    아 역시 ㅠㅠㅠ 너무감사합니다!!!ㅜㅜ
    0
  • CODCODE
    80
    2020-01-25 04:18:28

    채택 이런게 없나요??? ㅠㅠㅠ 두분다 너무 감사한데 ㅠㅠㅠㅠㅠ 넘 감사드립니다..

    0
  • 로그인을 하시면 답변을 등록할 수 있습니다.