时间戳

首页 > 解决方案 > 在这种情况下，setstate 会在 Object map 之后运行吗？

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

问题描述

我有以下代码：

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 之前是否有机会更新？

标签： reactjs

解决方案

我不确定technophyle是否正确。

他们在被调用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()

推荐阅读