728x90
발생 이유
- .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 (
...
);
};
728x90
'FrontEnd > React' 카테고리의 다른 글
[React] ERROR - create-next-app / Cannot find module 'stream/promises' (0) | 2024.03.27 |
---|---|
React 버전 정책 및 주버전(V16, 17, 18, 19) 특징 (0) | 2024.02.02 |
[React] React 프로젝트 개발 정책 만들기 (0) | 2024.01.26 |
[React] React 로컬/전역 상태 관리 - React Hook(useState), React Store(Redux) (0) | 2024.01.24 |
React 프로젝트 생성하기 (1) | 2024.01.03 |