this.setState return 是否在反应中承诺

Question

我使 componentWillMount() 异步。现在我可以使用 await 和 setState.

示例代码如下：

componentWillMount = async() => {
  const { fetchRooms } = this.props
  await this.setState({ })
  fetchRooms()
}

所以这里的问题是 this.setState returns promise 因为我可以使用 await 吗？

编辑

当我放置 await 时，它会按顺序运行 1, 2, 3 当我删除 await 时，它会运行 1, 3, 2??

  componentWillMount = async() => {
    const { fetchRooms } = this.props
    console.log(1)
    await this.setState({ } => {
      console.log(2)
    })
    console.log(3)
    fetchRooms()
  }

Answer 1

setState 没有 return 承诺。

setState有回调

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

Answer 2

这不是 return 承诺。

您可以在任何表达式前加上 await 关键字。如果该表达式未计算为承诺，则它无效。

setState 接受回调。

Answer 3

setState 通常不与 promises 一起使用，因为很少有这种需要。如果在状态更新 (fetchRooms) 之后调用的方法依赖于更新后的状态 (roomId)，它可以通过其他方式访问它，例如作为参数。

setState 使用回调而不是 return 承诺。由于很少需要，创建未使用的承诺会导致开销。

为了return一个承诺，setState可以像this answer中建议的那样被承诺。

发布的代码适用于 await，因为它是 hack。 await ... 是 Promise.resolve(...).then(...) 的语法糖。 await 产生一滴延迟，允许在状态更新完成后评估下一行，这允许按预期顺序评估代码。这与：

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

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

无法保证顺序在不同条件下保持不变。此外，第一个 setState 回调不是检查状态是否已更新的合适位置，这是第二个回调的用途。

Answer 4

您可以承诺 this.setState 以便您可以使用 React API 作为承诺。这就是我让它工作的方式：

class LyricsGrid extends Component {

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

稍后，我调用 this.setAsyncState 使用标准 Promise API:

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

Answer 5

您可以简单地为 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

Answer 6

不要认为 setState 会返回 Promise，但您始终可以这样做

 await new Promise( ( resolve ) => 
     this.setState( {
         data:null,
     }, resolve )
 )

或者你可以像这样制作一些实用函数

const setStateAsync = ( obj, state ) => {
    return new Promise( ( resolve ) =>
        obj.setState( state , resolve )
    )
}

并像这样在 React.Component 中使用它：

await setStateAsync(this,{some:'any'})

Answer 7

回答这个问题的更简单方法是我们可以使用 node.js 的预安装 util 库中的 promisify 函数，然后将其与 await 一起使用 关键字。

import {promisify} from 'util';

updateState = promisify(this.setState);
await this.updateState({ image: data });

this.setState return 是否在反应中承诺

Does this.setState return promise in react

javascript

promise

setstate

async-await

reactjs

您可以简单地为 setState 自定义一个 Promise