Question

我知道setState是异步的，但是无论如何（在没有Redux的情况下）在执行另一个函数之后是否有调用setState的条件，如下所示：

handleOpenUpdateItem = (item) => {
    const { getImageByItemId } = this.props;
    getImageByItemId(item.id);
    this.setState({ updateMode: true, item });
  };

问候！

Answer 1

将handleOpenUpdateItem转换为async函数。然后，您可以在其中编写同步代码。

  async handleOpenUpdateItem(item) {
       const { getImageByItemId } = this.props;
       const item = await getImageByItemId(item.id); // wait for the call to the backend to finish
       this.setState({ updateMode: true, item }); 
  };

Answer 2

正如注释中已经提到的那样，您可以使用回调来确保函数完成后执行this.setState（使用Promises或async/await也是不错的选择）。这是如何实现的示例：

  getImageByItem = (id, callback) => {
    // Do something here
    // And return your image, or anything you want through callback like so:
    callback(yourImage)
  }

  handleOpenUpdateItem = (item) => {
    const { getImageByItemId } = this.props;
    getImageByItemId(item.id, (image) => {
      this.setState({ updateMode: true, item });
    });
  };

因此，您将getImageByItem函数更改为包括回调，然后在handleOpenUpdateItem中使用此回调和其中的setState。

2019年编辑

正如下面@Levitator不平衡所提到的，使用Promises可能更好，因此您可以像这样实现它：

没有异步/等待状态：

getImageByItemId = (id) => {
  return new Promise((resolve, reject) => {
    // Do something with your id/image, then resolve
    resolve()
    // Or reject when some error happens
    reject()
  })
}

  handleOpenUpdateItem = (item) => {
    const { getImageByItemId } = this.props;
    getImageByItemId(id)
      .then(() => {
        this.setState({ updateMode: true, item });
      })
      .catch(() => {
        // ... handle your reject here
      })
  };

或者您可以像这样使用async/await： 异步/等待：

getImageByItemId = (id) => {
  return new Promise((resolve, reject) => {
    // Do something with your id/image, then resolve
    resolve()
    // Or reject when some error happens
    reject()
  })
}

handleOpenUpdateItem = async (item) => {
  const { getImageByItemId } = this.props;
  let something = await getImageByItemId(item.id)
  // or just:
  // await getImageByItemId(item.id)
  this.setState({ updateMode: true, item });
};

Answer 3

this.setState()是异步的，这意味着您通常不能在它之后执行它们，并且期望它们仅在setState完成其过程之后才发生。先执行setState之前的事情，然后再调用setState（完全像您所做的那样）即可。

Answer 4

您可以使handleOpenUpdateItem异步，并为getImageByItemId使用await。

在函数后调用setState

4 个答案: