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

Я ломал голову над этой проблемой, и мне нужна помощь с решением. У меня есть массив идентификаторов в 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.info(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.info(registrations);
        let eventProperties = event.properties[0];
        Object.keys(eventProperties).forEach(key => columns.push({
            title: eventProperties[key].title,
            dataIndex: key,
            key: key
        }));
        console.info(registrations);
        console.info(registrations2);
        return (
            <h1>hi</h1>
        )
    }
    return <Loading/>
}

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

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

Видя, что getRegistrations() является асинхронным, вам нужно будет учитывать это при его вызове. Учтите это: this.getRegistrations(event).then((registrations) => { console.info('got data', registrations); })

Dacre Denny 28.03.2019 05:34
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
1
1
5 560
3
Перейти к ответу Данный вопрос помечен как решенный

Ответы 3

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

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

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

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

Вместо

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

Сделай это

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

Возвращает ли getRegistrations обещание? Разве это не было бы технически возвратом массива? Кроме того, когда я пытаюсь сделать что-то вроде console.info(registrations[0]), это регистрируется undefined. Тем не менее console.info(registrations) похоже, что массив полностью корректен в консоли Javascript?

DrummerGenius 28.03.2019 06:18

асинхронная функция возвращает обещание. developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…

Prithviraj Sahu 28.03.2019 08:31
Ответ принят как подходящий

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

вот пример.

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

Это первое, что действительно работает! Как я могу получить доступ к данным за пределами console.info(data)? Мне нужно иметь возможность использовать эти регистрации для отображения их данных в таблице.

DrummerGenius 28.03.2019 06:47

Вы знакомы с состоянием реакции. вы можете использовать состояние в этой ситуации

Kyaw Kyaw Soe 28.03.2019 06:50

Я сделал это, и это сработало! Однако мне следует избегать вызова setState при рендеринге, верно? Не лучше ли реорганизовать этот код, чтобы он вызывался в componentDidMount?

DrummerGenius 28.03.2019 06:59

да, вы должны выполнить вызов API в componentDidMount, если хотите, я обновлю код песочницы для вас.

Kyaw Kyaw Soe 28.03.2019 07:01

это было бы потрясающе! Кроме того, вот мой код для this.getEvent(): return this.props.listOfEvents.events.find(event => event._id === this.props.match.params.eventId); Я думаю, что это работает асинхронно, так как иногда он не определен. Это правда? Как я могу это исправить? Спасибо большое, вы спасатель!

DrummerGenius 28.03.2019 07:03

Вы спасатель! StackOverflow нужно больше таких людей, как вы!

DrummerGenius 28.03.2019 07:18

Другие вопросы по теме