[英]How to make asynchronous calls inside a forEach() which depends on data from another asynchronous call?
I am working with an API and want to make some calls from my React application. 我正在使用API,并且想从我的React应用程序中进行一些调用。 They are async calls nested inside a forEach().
它们是嵌套在forEach()中的异步调用。 I get all the promises and push them inside a promises array.
我得到了所有的承诺,并将它们放入一个promises数组中。 Then use the axios.all() method as described by axios docs but when I push the results of these promises to the myData array I get an empty array.
然后使用axios文档所描述的axios.all()方法,但是当我将这些promise的结果推送到myData数组时,我得到一个空数组。
Except axios.all(promises) method I tried nested then() calls on Promises but that just complicated everything. 除了axios.all(promises)方法之外,我尝试了对Promises进行嵌套then()调用,但这使一切变得复杂。 Here is my code:
这是我的代码:
componentDidUpdate(nextProps, nextState) {
if (this.props.to !== nextProps.to || this.props.from !==
nextProps.from) {
let promises = [];
Axios.get(
`http://localhost:3000/api/visits?from=${this.props.from}&to=${
this.props.to
}`
).then(res => {
res.data.forEach(visit => {
promises.push(
Axios.get(`http://localhost:3000/api/clients/${visit.clientId}`
})
);
});
Axios.all(promises).then(results => {
results.forEach(res => {
const clientProps = {
name: res.data[0].name,
lastname: res.data[0].lastname,
mobile_number: res.data[0].mobile_number
};
myData.push(clientProps); // Here I am pushing the data to a global array
});
this.setState({myData})
});
});
}
}
When I run the code I expect the array "myData" to be filled with the data pushed from the API call but instead I get an empty array. 当我运行代码时,我希望数组“ myData”填充有从API调用中推送的数据,但是我得到了一个空数组。 Is there any way to get around this problem?
有什么办法可以解决这个问题?
// I try to access data from this.state inside the render() method of my class component to generate a Table data with the name property.
<td>{this.state.myData[index].name}</td>
I guess this version is more handy. 我想这个版本更方便。
componentDidUpdate(nextProps, nextState) {
if (this.props.to !== nextProps.to || this.props.from !==
nextProps.from) {
let promises = [];
Axios.get(
`http://localhost:3000/api/visits?from=${this.props.from}&to=${
this.props.to
}`
).then(res => {
return Axios.all(res.data.map(visit => {
return Axios.get(`http://localhost:3000/api/clients/${visit.clientId}`)
}))
})
.then(results => {
return results.map(res => {
return {
name: res.data[0].name,
lastname: res.data[0].lastname,
mobile_number: res.data[0].mobile_number
};
});
})
.then(clientProps => {
// then update state or dispatch an action
this.setState(() => ({myData: clientProps}));
});
}
}
getVisits(from, to) {
return Axios.get(`http://localhost:3000/api/visits?from=${from}&to=${to}`);
}
getClients(ids) {
return Axios.all(ids.map(id => Axios.get(`http://localhost:3000/api/clients/${id}`));
}
async getClientsOfVisits(from, to) {
const response = await this.getVisits(from, to);
const promises = await this.getClients(response.data.map(visit => visit.clientId)));
return promises.map(res => res.data[0]);
}
componentDidUpdate(nextProps, nextState) {
const { to, from } = this.props;
const toChanged = to !== nextProps.to;
const fromChanged = from !== nextProps.from;
if (toChanged || fromChanged) {
this.getClientsOfVisits(to, from).then(myData => {
this.setState({ myData });
})
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.