Реакция заданного значения в карте массива не работает

Question

У меня проблема с чем-то, что выглядит очень просто ..

Подводя итог, у меня есть много магазинов и много пользователей, связанных с магазинами по идентификатору магазина

В моем componentDidMount я вызываю сервис «getByStore», который представляет собой Promise, который возвращает список участников по storeId (элементы, основанные на модели Member).

Пока там все в порядке. Теперь я должен установить дополнительное значение для каждого члена. Поэтому я сопоставляю всех участников и запускаю новое Обещание, которое возвращает список сопровождающих.

Я назначаю возврат обещания в правильное значение Участника.

После этого я устанавливаю значения в состоянии компонента, и это отправляется другому компоненту.

Проблема заключается в том, что когда я сохраняю файл console.log в последнем компоненте, значение всегда устанавливается равным нулю. Как будто моя карта массивов никогда не случалась.

Трудно объяснить, поэтому дайте мне знать, если я что-то забыл, чтобы помочь пониманию.

Вот код с картой массива:

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>
    );
  }

Спасибо!

Answer 1

Джонас прав насчет ответа, пытаясь написать код с минимальными изменениями, используя async и await

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

  const resolvedMemebersWitEscorts = await Promise.all(memberWithEscorts);

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

Answer 2

Вы должны подождать, пока все истории сопровождения будут установлены, прежде чем передать их в 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;
}