Question

我已经尝试了2次来修改通过API获取的对象，方法是将其映射，然后再通过映射以及对API的请求来修改这些属性之一。

如果我现在向您展示代码，将会更加清楚：

async componentDidMount() {
  let api = "http://localhost:3000/retrievecommentaries/" + this.props.article;
  let res = await fetch(api);
  let data = await res.json();

  let commentaires = [];

  data.map(commentaire => {
    this.retrieveUser(commentaire.user)
      .then(user => (commentaire.completeuser = user))
      .then((commentaires = [...commentaires, commentaire]));
  });

  console.log(commentaires);

  await this.setState({
    commentarylist: commentaires
  });
}

如您所见，我首先获得一篇文章的评论；然后，对于每个评论，我尝试通过评论中包含的ID（commentaire.user）来检索用户。

我实际上认为，此地图中的.then足以确保在调用this.setState时，我的新评论列表会很好。

但是实际上，console.log（commentaires）还可以；我的this.state.commentarylist也;但是，当我显示我的评论列表对象时，它不具有completeuser属性。...这可能意味着传递给setState的“评论员”也都没有completeuser属性。这是奇怪的IMO，因为我在分配completeuser属性之前等待用户获取信息，然后再推送到我的数组...

所以我有点困惑。

提前谢谢！：）

Answer 1

您不是在等待this.retrieveUser调用，因此this.setState会在commentaires数组中填充任何数据之前被调用。

在将结果放入状态之前，可以使用await和Promise.all确保所有请求均已完成。

示例

async componentDidMount() {
  let api = "http://localhost:3000/retrievecommentaries/" + this.props.article;
  let res = await fetch(api);
  let data = await res.json();

  let commentaires = [];

  await Promise.all(
    data.map(async commentaire => {
      let user = await this.retrieveUser(commentaire.user);
      commentaire.completeuser = user;
      commentaires.push(commentaire);
    })
  );

  this.setState({
    commentarylist: commentaires
  });
}

反应：在componentDidMount中映射

1 个答案: