Javascript 多个Axios请求进入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(…)

谢谢

您不能同时“添加”阵列。使用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));

}

---

这有两个问题：

1） 在您的.then中，“this”是未定义的，因此您需要在顶层存储对此的引用

2） 正如另一个答案所述，您不能像那样在JS中添加数组，需要使用concat，尽管由于它们是服务器响应，如果其中任何一个都没有实际返回内容，我也会添加一个默认值来阻止它出错

总之，我认为它应该是这样的：

componentWillMount() {

  // Make a request for vehicle data
  var that = this;
  axios.all([
    axios.get('/api/seat/models'),
    axios.get('/api/volkswagen/models')
  ])
  .then(axios.spread(function (seat, volkswagen) {
    var seatData = seat.data || [];
    var volkswagenData = volkswagen.data || [];
    var vehicles = seatData.concat(volkswagenData);
    that.setState({ vehicles: vehicles })
  }))
  .catch(error => console.log(error));
}

---

我想提一件不同的事。根据react生命周期，您应该更喜欢在

componentDidMount（）

方法中调用api

装入组件后会立即调用componentDidMount（）。需要DOM节点的初始化应转到此处。如果需要从远程终结点加载数据，可以在此处实例化网络请求

---

您应该提供解释，而不仅仅是纯代码。代码是自解释的，因此无需进一步解释。如果需要进一步的帮助来理解它，官方文件总是可用的。这是所有问题中最好最简单的答案，谢谢。

constructor(){
        super();
        this.state = {};
    }

    componentDidMount(){
        axios.all([
            axios.post('http://localhost:1234/api/widget/getfuel'),
            axios.post('http://localhost:1234/api/widget/getdatarate')
        ])
            .then(axios.spread((fuel,datarate) => {
                this.setState({
                    fuel:fuel.data.data[0].fuel,
                    datarate:datarate.data.data[0].data
                })
            console.log(this.state.fuel)
            console.log(this.state.datarate)

            }))
    }