多个Axios请求进入ReactJS状态

小编典典

多个Axios请求进入ReactJS状态

reactjs

因此，我一直将以下代码放入我的React JS组件中，而我基本上是试图将两个API调用都置于一种称为的状态，vehicles但是以下代码却出现了错误：

componentWillMount() {

    // Make a request for vehicle data

    axios.all([
      axios.get('/api/seat/models'),
      axios.get('/api/volkswagen/models')
    ])
    .then(axios.spread(function (seat, volkswagen) {
      this.setState({ vehicles: seat.data + volkswagen.data })
    }))
    //.then(response => this.setState({ vehicles: response.data }))
    .catch(error => console.log(error));
  }

现在，我猜我无法像我一样添加两个数据源，this.setState({ vehicles: seat.data + volkswagen.data })但是还可以怎么做呢？我只希望将来自该API请求的所有数据置于一种状态。

这是我目前收到的错误：

TypeError: Cannot read property 'setState' of null(…)

谢谢

阅读 303

2020-07-22

共1个答案

小编典典

您不能将数组“添加”在一起。使用array.concat函数（https://developer.mozilla.org/en-
US/docs/Web/JavaScript/Reference/Global_Objects/Array/concat）将两个数组合并为一个，然后将其设置为状态。

componentWillMount() {

   // Make a request for vehicle data

   axios.all([
     axios.get('/api/seat/models'),
     axios.get('/api/volkswagen/models')
   ])
   .then(axios.spread(function (seat, volkswagen) {
     let vehicles = seat.data.concat(volkswagen.data);
     this.setState({ vehicles: vehicles })
   }))
   //.then(response => this.setState({ vehicles: response.data }))
   .catch(error => console.log(error));

}

2020-07-22