使用for循环内请求-响应中的json对象填充reactjs映射

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

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

数据

映射

这是我得到的json对象：

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

我想要一个这样的对象：

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

我试图在

componentWillMount（）中填充数据映射，如下所示：

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

构造函数（道具）{
超级（道具）；
此.state={
数据，
};
}
组件willmount（）{
for（设i=0；i<7；i++）{
axios.get（“http://localhost:5000/transfer/getUsesByDay/”“那么(
res=>{
控制台日志（“http://localhost:5000/transfer/getUsesByDay/“+i）
console.log（res.data）
//TODO:设置状态=>填充数据
}
)
}
}
您应该使用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)]
       };
    })
  })
}

componentWillMount（）{
让回答=[]
for（设i=0；i<7；i++）{
responses.push（axios.get（“http://localhost:5000/transfer/getUsesByDay/“+i”）
}
承诺。所有（回应）。然后（结果=>{
this.setState（prevState=>{
返回{
数据：[…prevState.data，…results.map（r=>r.data）]
};
})
})
}

请改为尝试
componentDidMount
（
componentWillMount
已被弃用）
您应该使用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)]
       };
    })
  })
}

componentWillMount（）{
让回答=[]
for（设i=0；i<7；i++）{
responses.push（axios.get（“http://localhost:5000/transfer/getUsesByDay/“+i”）
}
承诺。所有（回应）。然后（结果=>{
this.setState（prevState=>{
返回{
数据：[…prevState.data，…results.map（r=>r.data）]
};
})
})
}

请尝试使用
componentDidMount
（
componentWillMount
已弃用）
首先要注意的是：
componentWillMount
已弃用，不建议使用。你应该使用
componentDidMount
。第二：到目前为止，你试图设置状态，遇到了什么问题？当我尝试这个：this.setState（{data:res.data}）时，我得到了TypeError:data.forEach不是一个函数我在你的代码中没有看到
forEach
？这就是为什么我被绊倒的原因，我没有使用foreach首先要注意的是：
componentWillMount
已被弃用，不建议使用。你应该使用
componentDidMount
。第二：到目前为止，你试图设置状态，遇到了什么问题？当我尝试这个：this.setState（{data:res.data}）时，我得到了TypeError:data.forEach不是一个函数我在你的代码中没有看到
forEach
？这就是为什么我被绊倒的原因，我没有使用foreach，您不应该使用
prevState.data=
。这改变了国家。React可能不会触发重新渲染。那么，我应该使用什么来代替prevState.data？谢谢Brian！我已经做了一次编辑（不确定是否有任何错误，因为我自己没有运行它，但传达了您正确提到的想法）感谢您的解决方案，但现在的问题是我没有得到相同的结果，axios.get似乎没有按顺序工作，它是随机执行的（它返回i=2的结果，然后返回i=7的结果，然后每个示例返回两次i=5）你不应该做改变状态的
prevState.data=
。React可能不会触发重新渲染。那么，我应该使用什么来代替prevState.data？谢谢Brian！我已经做了编辑（不确定是否有任何错误，因为我没有亲自运行它，但传达了您正确提到的想法）谢谢您的解决方案，但现在的问题是我没有得到相同的结果，axios.get似乎没有按顺序工作，它随机执行（它返回i=2的结果，然后返回i=7的结果，然后返回两次i=5，每个示例）