我已经坚持了一段时间。 在React组件中,我试图从3个源中获取数据,此外,获取url还要取决于另一个获取结果。然后,我想使用Promise.all函数将setState仅用于所有三个获取函数。 我试图以各种可能的方式使用async / await组合,但仍未解决。我想念什么?
class DuelDetail extends React.Component {
state = {
duel: [],
dataset: [],
algorithms: []
};
fetchDuel = async () => {
var dataset = null
const duelID = this.props.match.params.duelID;
let duel = await axios.get(`http://127.0.0.1:8000/api/duel/${duelID}`,
{'headers': {'Authorization': `Token ${localStorage.getItem('token')}`}})
.then(async (res) => {
dataset = await this.fetchDataset(res.data.dataset)
return [duel, dataset]
}
)
};
fetchDataset = async (datasetId) => {
let res = await axios.get(`http://127.0.0.1:8000/api/dataset/${datasetId}`,
{'headers': {'Authorization': `Token ${localStorage.getItem('token')}`}})
return res
};
fetchAlgorithms = () => {
return axios.get(`http://127.0.0.1:8000/api/algorithm/`,
{'headers': {'Authorization': `Token ${localStorage.getItem('token')}`}})
};
componentDidMount() {
const promises = [this.fetchDuel()[0], this.fetchDuel()[1], this.fetchAlgorithms()]
Promise.all(promises).then(([duelsResponse, datasetsResponse, algorithmsResponse]) => {
this.setState({
duels: duelsResponse.data,
dataset: datasetsResponse.data,
algorithms: algorithmsResponse.data
});
});
}