정상적인줄 알았던 코드에서 계속 "{name}.map is not a function"이라는 에러가 떴다.
taskType.map((task)=> (
<Task task={task}></Task>
))
구글링 결과 map함수의 상속관계에 대한 문제임을 확인했다.
Object 객체에는 map함수가 없고 하위객체인 Array에 지원하는 함수다. 따라서 Object 객체에 대한 map함수는 불러들일 수 없기에 해당 오류가 발생한 것이다.
웹 제작을 하면서 나는 대부분 데이터 전달 객체를 JSON형태로 주고 받는 것을 선호하는데 JSON도 typeof()로 확인해보면 object임을 알 수 있다. 따라서, JSON객체를 Array로 변형하거나 특정 Array를 지정해서 map함수를 실행시킬 수 있다.
내가 받은 JSON객체는 형태가 아래와 같다.
{
items: [{},{}],
numOfRows: 20,
pageNo: 1,
totalCount: 2
}
단순히 items의 내용이 필요했기에 객체내의 items를 지정하는 방법으로 오류를 해결했다.
taskType.items.map((task)=> (
<Task task={task}></Task>
))