Как можно сопоставить значения двух элементов, извлеченных из API?

Question

Я получаю данные из двух API и получаю: - массив пользовательских объектов, каждый с идентификатором - массив объектов собраний, каждый с идентификатором владельца, который соответствует идентификатору пользователя

Я хочу получить все эти данные только один раз в моем домашнем компоненте и отобразить все встречи с их соответствующими владельцами на странице. Иногда это работает, но иногда выдает TypeError: Невозможно прочитать свойство 'first_name' из undefined. Я предполагаю, что это потому, что он асинхронный, но мои действия используют синтаксис async await, и я не уверен, что делаю неправильно.

действия (fetchUsers выглядит одинаково)

export const fetchMeetings = () => async dispatch => {
  const response = await api.get('/meetings');
  dispatch({ type: 'FETCH_MEETINGS', payload: response.data });
};

в компоненте:

  componentDidMount() {
    this.props.fetchMeetings();
    this.props.fetchUsers();
  }
...
  const getOwnerName = ownerID => {
    const owner = users.filter(user => user.id === ownerID)[0]
    return `${owner.first_name} ${owner.last_name}`
  }

  const meetingsArray = meetings.map(meeting => 
    <div key={meeting.callid}>
      <Meeting
        name={meeting.name}
        startTime={meeting.start_time}
        endTime={meeting.end_time}
        owner={getOwnerName(meeting.owner)} />
    </div>
  )

Answer 1

Вы используете async / await внутри fetchMeetings(...) метода, но это не влияет на то, как этот метод запускается вне функции. И fetchMeetings(...), и fetchUsers (...) все равно будут работать в componentDidMount(...) асинхронно.

Я считаю, что это работает только тогда, когда fetchUsers(...) финиширует первым. Попробуйте это исправить:

async componentDidMount() {
   await this.props.fetchUsers();
   await this.props.fetchMeetings();
}