React js在for循环中使用axios填充地图答案

【问题标题】：React js fill a map using axios inside a for loopReact js在for循环中使用axios填充地图
【发布时间】：2020-06-26 17:26:29
【问题描述】：

我正在尝试在 react Js 项目中可视化折线图（使用 canvas js），因此我使用 axios get 请求获取数据，并循环该请求以填充用作输入的数据变量折线图，但我的问题是 axios 似乎随机填充我的数据

这是我在componentdidmount() 中的代码：

     constructor(props) {
    super(props);

    this.state = {
      data: [] ,

    };
  }
       componentDidMount(){
    let responses = []
    for (let i = 0; i < 8; i++) {
      responses.push(axios.get("http://localhost:5000/transfer/getUsesByDay/"+i).then(res =>{
          return res.data
      }))
    }
      Promise.all(responses).then(results => {
    console.log(results)
    this.setState(prevState => {
      return {

            data: [...prevState.data, ...results.map(r => r)]


         };
        })
      }
      )

这是渲染函数：

    render() {
    const { data: chartData } = this.state;
    const { classes } = this.props;
    {console.log(chartData)}
    return (
      <Paper>
        <Chart
          data={chartData}
          className={classes.chart}
        >

现在，当我执行时，我得到了这个结果（console.log（results））：

0: {year: "15", utilisation: 3}
1: {year: "12", utilisation: 0}
2: {year: "12", utilisation: 0}
3: {year: "09", utilisation: 1}
4: {year: "08", utilisation: 1}
5: {year: "10", utilisation: 5}
6: {year: "09", utilisation: 1}
7: {year: "10", utilisation: 0}

然后当我重新执行时，我会得到另一个这样的结果：

0: {year: "11", utilisation: 3}
1: {year: "10", utilisation: 0}
2: {year: "10", utilisation: 0}
3: {year: "09", utilisation: 1}
4: {year: "09", utilisation: 1}
5: {year: "09", utilisation: 5}
6: {year: "08", utilisation: 1}
7: {year: "08", utilisation: 0}

结果应该是这样排序的：

0: {year: "14", utilisation: 3} // the result of http://localhost:5000/transfer/getUsesByDay/"+i when i == 0 , and so on
1: {year: "13", utilisation: 0}
2: {year: "12", utilisation: 0}
3: {year: "11", utilisation: 1}
4: {year: "10", utilisation: 1}
5: {year: "09", utilisation: 5}
6: {year: "08", utilisation: 1}
7: {year: "07", utilisation: 0}

【问题讨论】：

这不是axios 或react 问题。负责 API 的开发人员应确保内容的顺序，或者您可以在处理结果时自行排序。
谢谢 samura，但那是怎么回事，我不认为问题出在 api 上，因为 api 只返回一个对象。
你能检查一下你的网络标签吗？提出了哪些请求
都是按顺序执行的
我通过在 axios 获取请求之前添加 async 和 await 逻辑解决了这个问题

标签： reactjs axios

【解决方案1】：

您的一些回复即使是先被请求的，也因为互联网上发生的事情（数据丢失，必须重新发送等）而得到回复

【讨论】：

谢谢你的常用用户名，我明白了，但在这种情况下，我不会得到包含 7 个对象的完整地图，似乎它执行相同的 api 不止一次，或者它随机填充地图

【解决方案2】：

在你的问题中，你已经写了你正在做的事情

console.log(res.data)

但这在您的代码中不可见。通过猜测，我可以看到您在

中使用了 res 变量名

then(res =>{
      return res.data
 })

如果您在上面的语句中完成了console.log，它将仅取决于每次调用的响应，并且每次输出的顺序可能是随机的。

【讨论】：

谢谢 Beowulf，我编辑了我的问题。我做了 console.log(results) 而不是 console.log(res.data)