如何两次调用MongoDB取数传递给子组件并解决收藏卡片仅渲染一个的问题

• 循环获取卡片数据时，每次遍历都新建空数组仅存入当前单张卡片数据，直接调用setState覆盖了state.cards的原有值，最终state.cards只会保留最后一次请求到的卡片，所以仅渲染1张。
• 循环内频繁调用await串行请求、多次触发setState，也会产生不必要的性能开销和重渲染。

优先使用Promise.all并行请求所有卡片数据，再一次性更新state，性能更优：

class Favorites extends Component {
  state = {
    cards: [],
  };

  async componentDidMount() {
    const { data } = await userMethods.getUserFavorites();
    const favoritesArray = data.favorites;
    // 生成所有卡片请求的Promise数组，并行发起请求
    const cardPromiseList = favoritesArray.map(cardId => cardService.getFavoritesCards(cardId));
    // 等待所有请求完成
    const cardResponseList = await Promise.all(cardPromiseList);
    // 提取所有卡片数据
    const allCards = cardResponseList.map(response => response.data);
    // 一次性更新state
    this.setState({ cards: allCards });
  }

  render() {
    const { cards } = this.state;
    return (
      <div className="container" >
        <PageHeader>My favorites</PageHeader>
        <div className="row">
          <div className="col-12 mt-4">
            {cards.length > 0 && <p>This are the chosen one's...</p>}
          </div>
        </div>
        <div className="row">
          {cards.length > 0 &&
            cards.map(card => <CardFavorite card={card} key={card._id} />)
          }
        </div>
      </div>
    );
  }
}

export default Favorites;

如果业务场景需要保持串行请求的逻辑，也可以修改为数据累加后一次性更新state：

async componentDidMount() {
  const { data } = await userMethods.getUserFavorites();
  const favoritesArray = data.favorites;
  const allCards = [];
  for (var cardId of favoritesArray) {
    const { data } = await cardService.getFavoritesCards(cardId);
    allCards.push(data);
  }
  this.setState({ cards: allCards });
}

内容的提问来源于stack exchange，提问作者junior kim