改进

Question

componentDidUpdate() {
    if (this.state.currentDirectory === Constant.EVENT_DISCUSSION_COMMENTS) {
      console.log("Did update", this.state.commentList[0].reply_by);
    }
  }

  handleGetDiscussionComments = async (e) => {
    const target = e.target;
    const discussionID = target.getAttribute("data-key");
    const currentDirectory = Constant.EVENT_DISCUSSION_COMMENTS;

    if (discussionID !== null) {
      const commentList = await CommentApi.getCommentBasedOndiscussion_id(
        discussionID
      );

      await commentList.map(async (comment) => {
        const username = await User.getUserName(comment["reply_by"]).then(
          console.log("then", comment.reply_by)
        );
        comment["reply_by"] = username;
        console.log("async", comment.reply_by);
      });

      console.log("before setState", commentList[0].reply_by);

      this.setState({
        commentList,
        selectedDiscussionID: discussionID,
        currentDirectory,
      });

      console.log("after setState");
    }
  };

所以问题在于，即使我在commentList.map函数的前面等待，它仍然会执行以下代码，我该如何避免呢？

输出：
然后5f3207204450b32620449657
然后5f3207204450b32620449657
在setState 5f3207204450b32620449657前
是否更新了5f3207204450b32620449657
在setState之后
异步DummyPerson

随着这种问题的继续，我无法在网页上显示用户名，而是显示了ObjectId。

Answer 1

鉴于您正在使用map，您可以等待Promise.all上的map所获得的承诺：

await Promise.all(commentList.map(async (comment) => {
        const username = await User.getUserName(comment["reply_by"]).then(
          console.log("then", comment.reply_by)
        );
        comment["reply_by"] = username;
        console.log("async", comment.reply_by);
      }));

Answer 2

您可以将事情重构为这样的东西。

巨大的if被翻转为减少嵌套的早期回报
不必要的.then()已从评论用户名映射对象中删除
在其中添加了必要的Promise.all()。

handleGetDiscussionComments = async (e) => {
  const target = e.target;
  const discussionID = target.getAttribute("data-key");
  const currentDirectory = Constant.EVENT_DISCUSSION_COMMENTS;

  if (discussionID === null) {
    return;
  }
  const commentList = await CommentApi.getCommentBasedOndiscussion_id(discussionID);

  await Promise.all(
    commentList.map(async (comment) => {
      comment["reply_by"] = await User.getUserName(comment["reply_by"]);
    }),
  );

  this.setState({
    commentList,
    selectedDiscussionID: discussionID,
    currentDirectory,
  });

  console.log("after setState");
};

改进

要详细说明我之前的最后一点：

进一步的改进是收集一组需要提取用户名的用户ID，并且只提取一次用户名。

// Construct a set of unique user IDs
const userIdSet = new Set(commentList.map((c) => c.reply_by));
// Fetch an array of pairs [userid, username]
const userIdPairs = await Promise.all(
  [...userIdSet].map(async (userId) => [
    userId,
    await User.getUserName(userId),
  ]),
);
// Create a mapping out of it
const userIdMap = Object.fromEntries(userIdPairs);
// Augment comment objects with `reply_by_name` from the map
commentList.forEach((c) => (c.reply_by_name = userIdMap[c.reply_by]));

更好的是，您可以在客户端缓存用户ID <->用户名映射，因此，在加载新注释时，您可能已经加载了用户名。

// a global variable (I know, usually not encouraged,
// but pragmatically should be fine,
// and can be refactored to something fancier later)
const knownUserNames = {};

// ...

async function handleGetDiscussionComments() {
  // Construct a set of unique user IDs
  const userIdSet = new Set(commentList.map((c) => c.reply_by));
  // Fetch an array of pairs [userid, username] unless we already know the result
  const userIdPairs = await Promise.all(
    [...userIdSet].map(async (userId) => [
      userId,
      knownUserNames[userId] || (await User.getUserName(userId)),
    ]),
  );
  // Create a mapping out of it
  const userIdMap = Object.fromEntries(userIdPairs);
  // Augment comment objects with `reply_by_name` from the map
  commentList.forEach(
    (c) => (c.reply_by_name = userIdMap[c.reply_by]),
  );
  // Update the global known username mapping with any new results
  Object.assign(knownUserNames, userIdMap);
}

如何使用地图等待（反应）

2 个答案:

改进