Я ломал голову над этой проблемой, и мне нужна помощь с решением. У меня есть массив идентификаторов в 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» отображаются как «[{...}]».
Я знаю, что это проблема, связанная с промисами (я возвращаю массив регистраций перед тем, как нажимать), но я понятия не имею, как это исправить! Некоторая дружеская помощь будет очень признательна!



![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)


Вам нужно использовать метод 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?
асинхронная функция возвращает обещание. developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…
Я рекомендую Promise.all, он разрешит один промис после того, как все промисы будут разрешены. И технически асинхронная функция также обещана, поэтому она вернет обещание.
вот пример.
https://codesandbox.io/s/jzz1ko5l73?fontsize=14
Это первое, что действительно работает! Как я могу получить доступ к данным за пределами console.info(data)? Мне нужно иметь возможность использовать эти регистрации для отображения их данных в таблице.
Вы знакомы с состоянием реакции. вы можете использовать состояние в этой ситуации
Я сделал это, и это сработало! Однако мне следует избегать вызова setState при рендеринге, верно? Не лучше ли реорганизовать этот код, чтобы он вызывался в componentDidMount?
да, вы должны выполнить вызов API в componentDidMount, если хотите, я обновлю код песочницы для вас.
это было бы потрясающе! Кроме того, вот мой код для this.getEvent(): return this.props.listOfEvents.events.find(event => event._id === this.props.match.params.eventId); Я думаю, что это работает асинхронно, так как иногда он не определен. Это правда? Как я могу это исправить? Спасибо большое, вы спасатель!
Вы спасатель! StackOverflow нужно больше таких людей, как вы!
Видя, что
getRegistrations()является асинхронным, вам нужно будет учитывать это при его вызове. Учтите это:this.getRegistrations(event).then((registrations) => { console.info('got data', registrations); })