[react native] TypeError: this.setState is not a function.

TypeError: this.setState is not a function.

export default class App extends Component {

this.state = { data : '' }
 
... 

getItem = () => {
return new Promise(function (resolve, reject) {
axios
    .get('https://example.com')
    .then(function (response){
    resolve(response)
    })
    .catch(function (error){
    reject(error)
    });
  };
};



loadItem = () => {
this.getItem()
.then(function (items){

	this.setState({		<--- error
    	data : items
    });
    
});

}


...

render()

...



}

 

예를들어 이렇게 class 형 컴포넌트에서

loadItem 을 호출하면 getItem 에 있는 내용을 받아서

.then 안에서 setState 로 받아온 내용을 넣으려고 하는데

TypeError: this.setState is not a function.

라는 에러가 발생했다

this.setState 을 사용할 때 

비동기 (async/await , Promise) 를 통해

setState 를 할 수 없나보다..?

비동기를 사용 안하고 .then 안에서 this.setState 는 사용이 잘 됬는데..

 

 

export default class App extends Component {

this.state = { data : '' }
 
... 


loadItem = async () => {

const response = await axios
.get('https://example.com')

	this.setState({		
    	data : response
    });
    
});

}


...

render()

...



}

뭐... 이렇게

비동기를 통해 받아올거 다 받아오고 setState 로 

밖에서 넣어주면 되기는 하는데 쩝..

뭔가 맘에 안든다 좀더 찾아봐야겠다 

 

It's not a good practice to mix async/await with .then/.catch. Instead use one or the other. Here's an example of how you could do it using ONLY async/await and ONLY one this.setState() (reference to Promise.each function):

async / await를 .then / .catch와 혼합하는 것은 좋은 습관이 아닙니다. 대신 하나 또는 다른 것을 사용하십시오. 다음은 async / await 만 사용하고 this.setState () 하나만 사용하여 수행 할 수있는 방법의 예입니다 (Promise.each 함수에 대한 참조).

 

네 알겠습니다