TypeError Cannot read property 'setState' of undefined"

단일 쓰레드 형식인 react는 data를 한곳에서 다룹니다. 클래스별 state을 정할수 있고, 다른 클래스에게 props형식으로 정보를 전달할 수도있습니다. 가장 기본적인  state는 setState을 이용해 접근할수 있는데, 결과를 찍어보면 다음과 같은 에러가 나옵니다.

 

TypeError Cannot read property 'setState' of undefined"

 

이는 this.setState시 this(state).값이 undefined이기 때문인데, setState함수 실행 자체가 비동기적으로 작동해 this가 정해지지 않은 상태에서 콘솔을 찍었기 때문입니다.

 

state = {}

this.setState({
a: "1"
})

console.log(this.state) //error 발생

 

setState의 결과를 확인하기 위해선 변경이 된 이후 확인함수(console)을 실행시켜야 하고, 이는 확인함수를 콜벡함수로 둬야함을 의미합니다. 위 예제를 변경하면 다음과 같겠네요.

 

state = {}

this.setState({
a: "1"
}, ()=> {
	console.log(this.state)
} )

 

setState의 결과를 확인하고 싶으면 콜벡함수를 이용한다! 잊지마세요!