[React] TypeError: Cannot read property 'map' of undefined

발생 이유

-  .map(...) 실행 시 앞 데이터가 없어서 나는 타입 오류

- array.map() 인경우 array를 확인해보면 undefined으로 되어 있을 것이다.

 

해결 방법

1. 렌더링 상태에서 return 할 경우 && 을 사용하여 값 여부를 체크한다.

import React from 'react';

const UserList = () => {
  ...

  return (
    <div>
      {dataList && dataList.map((item, index) => (
        <div key={index}>
          {item.name}
        </div>
      ))}
    </div>
  );
};

 

2. 스크립트에서 return 할 경우 if 문을 사용하여 값 체크를 해준다.

import React from 'react';

const UserList = () => {
  if(dataList){
  const result = dataList.map((item) => {
    return {
      ...item
    }
  })
  setItems(result);

  return (
    ...
  );
};

import React from 'react';

const UserList = () => {
  const result = dataList?.map((item) => {
    return {
      ...item
    }
  })
  setItems(result);

  return (
    ...
  );
};