多愛可信請求分爲ReactJS國家

Question

所以我一直把下面的代碼我內無反應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）在你的。然後「本」是不確定的，所以你需要在頂層存儲到這個參考。

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

Answer 3

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) 

      })) 
    } 

Answer 4

我想提一些不同的東西。根據反應生命週期，您應該更喜歡componentDidMount()方法中的call API。 「

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

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