React 에러 | Type Error: Cannot read properties of undefined (reading '0')

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

API 통신 전에 Mock data로 작업하는 중에 number 형식의 배열을 가져와 React JSX 형식의 텍스트로 요소 하나씩 뿌려주는 부분에서만 에러가 났다. 단순한 number나, string 형식은 문제없이 보이는데 arrayData[0], arrayData[1] 이렇게 요소 하나씩 접근하는 부분에서 undefined 에러가 났다. 

---

🚧 받아오는 데이터 형식과 JSX

문제는 "pair_profit" 배열이다. 🤦🏻‍♀️

{
  "data": {
    "id": "1",
    "max_price": 51200000.333,
    "min_price": 40000000.333,
    "pair_profit": [0.00043, 0.00089]
  }
}

<p>
	{resultData.pair_profit[0]} % ~
    	{resultData.pair_profit[1]} %
</p>

 

 

🚧  해결 방법

{resultData.pair_profit && (
	<p>
    		{settingResultData.pair_profit[0]} % ~
        	{settingResultData.pair_profit[1]} %
	</p>
)}

리액트에서 배열 관련 undefined 에러는 거의 jsx에서 조건부렌더링을 사용하지 않아서이다. 미리 useState에 데이터를 저장하는 경우 경우,  데이터가 제대로 불러오기 전 [undefined,undefined] 이런 식으로 요소가 undefined로 들어가는 세팅되기도 하는데 이때 데이터 값이 세팅되기 전에 읽으려 해서 undefined typeerror 가 난다.

 

결론: 조건부렌더링을 잘 적용해주자!

 

 

---

🚧  결과 화면