在这种情况下，setstate 会在 Object map 之后运行吗？答案

【问题标题】：Will setstate run after Object map in this scenario?在这种情况下，setstate 会在 Object map 之后运行吗？
【发布时间】：2020-02-12 08:02:06
【问题描述】：

我有以下代码：

export function getMembersInDB(status) {
  if (this.state.data) {
    let membersObject = this.props.members;
    let membersList = [];

    Object.keys(membersObject).map(async (key) => {
      membersObject[key]['uid'] = key;
      membersObject[key]['profilePic'] = require("../../assets/img/empty-avatar.png");

      if (membersObject[key]['mStatus'] == status) {
        membersList.push(membersObject[key]);
      }
    });

    this.setState({
      data: membersList,
      loading: false,
    });
  }
}

关于整个异步的事情，我想知道。 this.setState 会等待 Object.keys 映射在设置之前完成执行，还是 this.setState 有可能在之前更新？

【问题讨论】：

使用 Promise.all 将 Object.keys 包裹起来，并将getMembersInDB 变成一个异步函数就能使 setState 工作。

标签： reactjs

【解决方案1】：

我不确定技术派是否正确。

membersList 将在调用 setState 之前填充是正确的，但如果您在地图中有异步调用，membersList 不会在 setState 之前填充被调用了！

在https://repl.it/repls/KindWeeAddin查看下面的代码。

在第一种情况下，“membersListWait”在.map 之后为空，但“membersList”在.map 之后填充。

function getMembersInDB() {
  let membersObject = {prop1: 1, prop2: 2, prop3: 3};
  let membersListWait = [];
  let membersList = [];

  Object.keys(membersObject).map(async (key) => {
      await sleep(1000);
      membersListWait.push(membersObject[key]);
  });

  Object.keys(membersObject).map(async (key) => {
      membersList.push(membersObject[key]);
  });

  console.log(membersListWait) // prints "[]"
  console.log(membersList) // prints "[1, 2, 3]"
}

function sleep(ms) {
  return new Promise((resolve) => {
    setTimeout(resolve, ms);
  });
}   

getMembersInDB()

【讨论】：

【解决方案2】：

无论有没有async，map 块中的代码将首先运行所有迭代，然后调用setState()。

因为：

首先，async 目前没有在您的代码中执行任何操作，因为其中没有异步操作。
如果有任何异步操作（如 promise），那么 setState() 将在该异步操作之前运行，因为它将在下一次迭代中运行（有或没有 await）。

【讨论】：