Question

我使我的componentWillMount()异步了。现在，我可以将await与setState一起使用了。

这是示例代码：

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

所以这里的问题是this.setState会返回诺言，因为我可以将await与它一起使用吗？

编辑

当我等待时，它会按顺序1, 2, 3运行；当我删除等待时，它会运行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()
  }

Answer 1

您可以承诺this.setState，以便可以将React API用作承诺。这就是我的工作方式：

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))

Answer 2

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

roomId使用回调，并且不返回承诺。由于很少需要这样做，因此创建未使用的承诺会导致开销。

为了兑现承诺，可以this answer中建议setState。

发布的代码可与setState配合使用，因为它是黑客。 await是await ...的语法糖。 Promise.resolve(...).then(...)产生一滴答的延迟，该延迟允许在状态更新完成后评估下一行，从而可以按预期顺序评估代码。这与：

await

不能保证订单在不同条件下会保持不变。另外，第一个this.setState({ roomId: room && room.roomId ? room.roomId : 0 } => { console.log(2) }) setTimeout(() => { console.log(3) });回调不是检查状态是否已更新的合适位置，这是第二个回调的目的。

Answer 3

它不返回承诺。

您可以将await关键字放在任何表达式前面。如果该表达式不符合承诺，则无效。

setState接受回调。

Answer 4

setState不返回承诺。

setState有一个回调。

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

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 的预安装 promisify 库中存在的 util 函数，然后将它与 await 关键字一起使用。

import {promisify} from 'util';

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

this.setState是否在响应中返回promise

7 个答案:

您可以简单地自定义setState的Promise