Перенос ответов на запрос axios в массив

Question

Я бьюсь головой об этой проблеме, и мне нужна помощь с решением. У меня есть массив идентификаторов в JSON, и я перебираю этот массив и делаю GET-запрос для каждого идентификатора. Затем я хочу поместить ответ этих запросов GET в массив.

Вот функция, которую я использую для проталкивания регистраций в массив. Итерация по массиву идентификаторов:

getRegistrations = async (event) => {
    let registrations = [];

    await event.registrations.forEach(registration => axios.get('/event/getRegistration', {
        params: {
            id: registration
        }
    }).then(res => {
            registrations.push(res.data.properties)
        }
    ).catch(err => console.log(err)));
    return registrations;
};

Здесь я звоню по этому коду:

render() {
    let event = this.getEvent();
    let registrations2 = [{
        age: 19,
        bio: 'test',
        firstName: 'hello',
        lastName: 'bye',
        password: 'adadas',
        telephone: "4920210213"
    }];
    if (this.props.listOfEvents.events.length !== 0 && !this.props.listOfEvents.gettingList && event) { //check if the array is empty and list has not been rendered yet
        let columns = [];
        let registrations = this.getRegistrations(event);
        console.log(registrations);
        let eventProperties = event.properties[0];
        Object.keys(eventProperties).forEach(key => columns.push({
            title: eventProperties[key].title,
            dataIndex: key,
            key: key
        }));
        console.log(registrations);
        console.log(registrations2);
        return (
            <h1>hi</h1>
        )
    }
    return <Loading/>
}

Когда я консоль регистрирую 'регистрации' против 'регистрации2', они должны быть очень идентичны. Однако в консоли javascript в Google Chrome «регистрации» отображаются как «[]», а «регистрации 2» - как «[{...}]».

Я знаю, что это проблема, связанная с обещаниями (я возвращаю массив регистраций до фактического нажатия), но я не знаю, как это исправить! Дружеская помощь будет очень признательна!

Answer 1

Я рекомендую Promise.all, он разрешит одно Обещание после того, как все обещания будут выполнены. И технически асинхронная функция также обещает, поэтому она будет возвращать обещание.

вот пример.

https://codesandbox.io/s/jzz1ko5l73?fontsize=14

Answer 2

Поскольку getRegistrations(event) возвращает обещание, вы должны выполнить операции с его возвращаемым значением внутри then.

Вместо

let registrations = this.getRegistrations(event);
console.log(registrations);

Сделайте это

this.getRegistrations(event).then(registrations => {
  console.log(registrations);
  // other operations on registrations
});

Answer 3

Вам необходимо использовать componentDidMount() метод жизненного цикла для правильного выполнения и состояние для хранения данных.

constructor (props) {
   super(props);
   this.state = {registrations :[]}
}
componentDidMount () {
    let response = this.getRegistrations()
    this.setState({registrations : response});
}

Затем получить доступ к этому состоянию в методе рендеринга.Не рекомендуется вызывать API из метода рендеринга.