React : ) Map 사용시 TypeError
TypeError: Cannot read properties of undefined (reading 'map')
👆 위 에러가 왜 뜨는지 알아보자
import React, { Component } from "react";
export default class FetchError extends Component {
constructor() {
super();
this.state = {
data: {},
};
}
componentDidMount() {
fetch("/lifecycle.json")
.then((res) => res.json())
.then((res) => {
this.setState({ data: res });
});
}
render() {
return (
<div>
{this.state.data.message.map((msg) => {
return <li>{msg}</li>;
})}
</div>
);
}
}
위 코드를 실행하면 TypeError 에러가 뜬다.
에러메시지를 읽어보면 말 그대로 undefined
에 대하여 map 함수를 실행하려 했다는 뜻.
undefined에 map 함수를 쓰진 않는데
this.state.data.message가 undefined가 됐다는 뜻.
📍 에러가 뜨는 원인
🔴 첫 번째 렌더에서는 초기값인 빈 객체({})를 가지고, 두 번째 렌더에서는 빈 객체에 서버에서 받아온 배열([])이 들어오게 된다.
🔴 두 번째 렌더에서는 아무런 문제 없이 실행되겠지만, 서버에서 값을 받아오기 전인 첫 번째 렌더에서는 array가 아닌 object 타입에 map 함수를 실행시키고 있으므로 타입 에러를 발생시킬 것
🙋♂️조건부 렌더링!
비동기 데이터를 처리할 때 예외처리를 해줘야한다.
예외처리어떻게 할까?
1. 삼항 연사자
this.state.data.message값이 true일때 반환하고 아니면 null반환
2. AND연산자
this.state.data.message값이 true일때만 반환한다.
3. state값에 배열을 넣어주기
💡 예초에 이런 식으로 초기 세팅에 배열을 넣어주면 에러가 안 뜸!!
Author And Source
이 문제에 관하여(React : ) Map 사용시 TypeError), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@dltjsgho/React-Map-사용시-TypeError저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)