[react] async에서 this.setState 사용하기

상황

data를 fetch 하는 동안 Spin을 돌리기 위해서, async function에서 await 앞뒤로 Spin을 켜고 끄는 state를 추가하려고 한다.

await this.setState는 가능한가?

return value

this.setState는 return value가 없다.
console.log(this.setState({ spin: true })는 undefined가 나온다.
this.setState를 await하려면 아래와 같이 사용할 수 없다. (Promise를 return하지 않기 때문에)

// Not work
const fetchData = async () => {
  await this.setState({ spin: true });
  const data = await fetch(`https://some-api.com/posts`);
  await this.setState({ spin: false });
}

new Promise를 사용하여 await를 하자

Promise와 this.setState의 조합

new Promise를 만들고 resolve를 setState의 callback에 넣어줘서 해결할 수 있다.

// Okay
const setStateSpin = (state) => {
  return new Promise(resolve => {
    this.setState(state, resolve)
  })
}
const fetchData = async () => {
  await this.setStateSpin({ spin: true });
  const data = await fetch(`https://some-api.com/posts`);
  await this.setStateSpin({ spin: false });
}

callback에 setTimeout으로 delay를 줄 수 있다.

// Okay
const setStateSpin = (state, delay) => {
  return new Promise(resolve => {
    this.setState(state, () => {
      setTimeout(() => {
      console.log('state is updated');
      resolve();
      }, delay)
    })
  })
}
const fetchData = async () => {
  await this.setStateSpin({ spin: true }, 1000);
  const data = await fetch(`https://some-api.com/posts`);
  await this.setStateSpin({ spin: false }, 0);
}

Reference

stackover-flow