时间戳

首页 > 解决方案 > 反应数组映射中的设置值不起作用

javascript - 反应数组映射中的设置值不起作用

问题描述

我有一个看起来很容易的问题..

总而言之，我有很多商店和通过 storeId 与商店相关的许多用户

在我的 componentDidMount 中，我调用了一个服务“getByStore”，它是一个 Promise，它按 storeId（基于模型成员的成员）返回成员列表。

直到那里，一切都好。现在我必须为每个成员设置附加值。所以我映射所有成员并触发一个新的 Promise，它返回一个护送列表。

我将承诺回报分配给会员的正确价值。

之后，我在组件状态中设置值并将其发送到另一个组件。

问题是当我在最终组件中 console.log 时，该值始终设置为 null。就像我的数组映射从未发生过一样。

这很难解释，所以如果我忘记了一些有助于理解的内容，请告诉我。

这是带有数组映射的代码： 

componentDidMount() {
    const { storeId, store } = Auth.user();

    MemberService.getByStore(storeId).then((members) => {
      const options = {
        fromDate: this.state.period.from,
        toDate: this.state.period.to,
      };

      const membersWithEscorts = members.map((member) => {
        EscortService.getLastEscorts(member.id, options).then((escorts) => {
          member.setEscortHistory(new EscortHistory(escorts));
        });
        return member;
      });

      this.setState({ members: membersWithEscorts, store });
    });
  }

这是接收成员的代码：

render() {
    const { members } = this.props;
    return (
      <div id="member-list" className="grid">
        <div className="grid-sizer" />
        {members.map(member => (
          <div key={member.id} className="grid-item">
            <MemberCard linkTo={`/member/${member.id}`} member={member} />
          </div>
        ))}
      </div>
    );
  }

谢谢 ！

标签： javascriptreactjses6-promise

解决方案

在将其传递给 setState 之前，您应该等待设置所有护送历史记录：

const membersWithEscorts = Promise.all(members.map((member) => {
    return EscortService.getLastEscorts(member.id, options).then((escorts) => {
      member.setEscortHistory(new EscortHistory(escorts));        
      return member;
    });
}));

membersWithEscorts.then(members => {
  this.setState({ members, store });
});

async使用/可能会更优雅await：

async componentDidMount() {
  const { storeId, store } = Auth.user();

  const members = await MemberService.getByStore(storeId);

  const membersWithEscorts = await Promise.all(members.map(m => this.addHistory(m)));

  this.setState({ members: membersWithEscorts, store });    
}

async addHistory(member) {
  const options = {
    fromDate: this.state.period.from,
    toDate: this.state.period.to,
  };
  const escorts = await EscortService.getLastEscorts(member.id, options);
  member.setEscortHistory(new EscortHistory(escorts));
  return member;
}

推荐阅读