TypeError: Cannot read property 'map' of null

꽤나 자주 있는 오류인데, react는 화면에 커밋 된 후에야 모든 효과를 실행하기 때문에 map을 반복실행할때

첫 턴에서 데이터가 아직 안 들어와 렌더링이 실행되면서 그 데이터가 undefined로 나타나는 오류이다

 

문제 해결은 조건이 참이면 요소가 출력 될 수 있도록 &&를 추가한다.

| </div>
  46 | <div className="inner">
> 47 |   <ul className="amount_list">
     | ^  48 |     {realdata.map((list) => (
  49 |       <MealAmountList
  50 |         key={list.id}

//해결

| </div>
  46 | <div className="inner">
> 47 |   <ul className="amount_list">
     | ^  48 |     {realdata && realdata.map((list) => (
  49 |       <MealAmountList
  50 |         key={list.id}