在reactjs映射中填充来自for循环内部请求响应的json对象

Question

我正在开发React面板，我发现了一个库，可以帮助我使用json对象构建折线图。

因此，我试图在for循环中从get请求中获取7个对象，并用它们填充data映射。

这是我得到的json对象：

{
"year": "2020-03-03",
"uses": 0
}

我想要一个这样的对象：

data = [
{
year: 2014,uses: 255,
}, {
year: 2016,uses: 250,
}, {
year: 2018,uses: 540,
},
];

我正在尝试像这样填充componentWillMount()内部的数据图：

constructor(props) {
super(props);
this.state = {
data ,
};
}
componentWillMount(){
for (let i = 0; i < 7; i++) {
axios.get("http://localhost:5000/transfer/getUsesByDay/"+i).then(
res => {
console.log("http://localhost:5000/transfer/getUsesByDay/"+i)
console.log(res.data)
//TODO : set state => Fill Data
}
)
}
}

Answer 1

您应该使用Promise.all等待所有响应承诺得到解决，然后尝试立即更新状态。

componentWillMount() {
let responses = []
for (let i = 0; i < 7; i++) {
responses.push(axios.get("http://localhost:5000/transfer/getUsesByDay/"+i))
}
Promise.all(responses).then(results => {
this.setState(prevState => {
return {
data: [...prevState.data, ...results.map(r => r.data)]
};
})
})
}

请改用componentDidMount(componentWillMount已弃用(