[#. React] TypeError: Cannot read property '' of undefined 에러 뜰 때 Json in Array, Object in Array 데이터 가져오기

 

 

 

 

 

 

 

[
   {
      name: "상품1",
      price: 129000,
      _id: "602b6786323789511beea1d1"
   },
   {
      name: "상품2",
      price: 99000,
      _id: "602b6786323789511beea1d2"
   }
]

 

React에서 이런 형식으로 들어가 있는 데이터를 꺼내와서 보여주려고 한다

 

 

 

 

 

 

useEffect(() => {

   console.log(props.detail.option);
    
 },[props.detail.option])

useEffect()로 페이지를 렌더링할 때 로그를 찍어보면 데이터가 그대로 잘 나온다

 

 

 

 

 

 

useEffect(() => {

    const ProductOption = props.detail.option

    ProductOption.map((item, index) => ((
      console.log(item)
    )))
    
 },[props.detail.option])

 

map으로 각각의 데이터를 가져오려고 하면 

TypeError: Cannot read property 'map' of undefined

에러가 발생한다

 

 

 

useEffect(() => {

   console.log(props.detail.option.length);
    
 },[props.detail.option])

 

length를 가져오려고 해도

TypeError: Cannot read property 'length' of undefined

에러가 발생할 것이다

 

 

 

 

 

 

 

분명 length, map 둘다 가능한데 안 되는 이유는?

말그대로 undefined인 데이터의 length을 가져오거나 map을 할 수 없다는 것이다

 

 

 

 

 

 

useEffect(() => {

   const ProductOption = props.detail.option

   if(ProductOption != 'undefined' && ProductOption != null) {
      setOptions(ProductOption)
   }

},[props.detail.option])

 

이렇게 'undefined'가 아닐 때, null이 아닐 경우를 잡아줘야 에러 없이 데이터를 가져올 수 있다