多個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));

}

Answer 2

這有兩個問題：

1）在你的.then中，“this”是未定義的，所以你需要在頂層存儲對它的引用。

2）正如另一個答案所述，你不能像JS一樣在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));
}

Answer 3

我想提一些不同的東西。 根據反應生命周期，您應該更喜歡在componentDidMount()方法中調用api。

“componentDidMount（）在安裝組件后立即被調用。需要DOM節點的初始化應該在這里。如果你需要從遠程端點加載數據，這是一個實例化網絡請求的好地方。”

https://reactjs.org/docs/react-component.html#componentdidmount

Answer 4

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)

            }))
    }