web-dev-qa-db-ja.com

this.setStateはreactでpromiseを返しますか

componentWillMount()を非同期にしました。これで、awaitをsetStateとともに使用できます。

サンプルコードは次のとおりです。

componentWillMount = async() => {
  const { location, fetchRooms } = this.props
  await this.setState({ roomId: room && room.roomId ? room.roomId : 0 })
  fetchRooms()
}

だからここでの質問は、this.setStateはpromiseを返すということです。awaitを使用できるからです。

Edit

Awaitを置くと、それはシーケンス1, 2, 3で実行され、awaitを削除すると、1, 3, 2 ??を実行します。

  componentWillMount = async() => {
    const { location, fetchRooms } = this.props
    console.log(1)
    await this.setState({ roomId: room && room.roomId ? room.roomId : 0 } => {
      console.log(2)
    })
    console.log(3)
    fetchRooms()
  }
javascriptreactjspromiseasync-await
13
Profer

setStateは、そのような必要性はめったにないため、通常はpromiseで使用されません。状態更新後に呼び出されるメソッド（fetchRooms）が更新された状態（roomId）に依存している場合、別の方法でアクセスできます。パラメータとして。

setStateはコールバックを使用し、promiseを返しません。これはめったに必要とされないため、使用されないプロミスを作成するとオーバーヘッドが発生します。

約束を返すために、 この答え で提案されているように、setStateを約束することができます。

投稿されたコードは、ハックだからawaitで動作します。 await ...はPromise.resolve(...).then(...)の構文糖衣です。 awaitは、状態の更新が完了した後、次の行を評価できる1ティックの遅延を生成します。これにより、意図した順序でコードを評価できます。これは次と同じです：

this.setState({ roomId: room && room.roomId ? room.roomId : 0 } => {
  console.log(2)
})

setTimeout(() => {
  console.log(3)
});

注文が異なる条件下で同じままであるという保証はありません。また、最初のsetStateコールバックは、状態が更新されたかどうかをチェックする適切な場所ではありません。これが2番目のコールバックの目的です。

12
Estus Flask

React AP​​Iを約束として使用できるように、this.setStateを約束することができます。これは私がそれを動作させる方法です：

class LyricsGrid extends Component {
  constructor(props) {
    super(props);
    this.setAsyncState = this.setAsyncState.bind(this);
  }

  setAsyncState = (newState) =>
    new Promise((resolve) => this.setState(newState, () => resolve()));

後で、標準のPromise APIを使用してthis.setAsyncStateを呼び出します。

this.setAsyncState({ lyricsCorpus, matrix, count })
  .then(foo1)
  .then(foo2)
  .catch(err => console.error(err))
13
alki

setStateはpromiseを返しません。

setStateにはコールバックがあります。

this.setState({
    ...this.state,
    key: value,
}, () => {
    //finished
});
3
Tazo leladze

約束を返しません。

式の前にawaitキーワードを叩くことができます。その式がプロミスに評価されない場合、効果はありません。

setStateはコールバックを受け入れます。

2
Quentin

SetStateのPromiseを簡単にカスタマイズできます

  componentWillMount = async () => {
    console.log(1);
    await this.setRooms();
    console.log(3);
  };

  setRooms = () => {
    const { fetchRooms } = this.props;
    return fetchRooms().then(({ room }) => {
      this.setState({ roomId: room && room.roomId ? room.roomId : 0 }, _ =>
        console.log(2)
      );
    });
  };

または

  setRooms = async () => {
    const { fetchRooms } = this.props;
    const { room } = await fetchRooms();

    return new Promise(resolve => {
      this.setState({ roomId: room && room.roomId ? room.roomId : 0 }, _ =>
        resolve()
      );
    });
  };

このヘルプ= Dを願っています

1
mvofreire