javascript - 多个 Axios 请求进入 ReactJS 状态

Question

所以我一直在我的 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(…)

谢谢

Answer 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));

}