14

したがって、React JS コンポーネント内に次のコードを配置しており、基本的に両方の API 呼び出しを 1 つの状態にしようとし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));
  }

今、私は私が持っているように2つのデータソースを追加できないと推測していthis.setState({ vehicles: seat.data + volkswagen.data })ますが、他にどのようにこれを行うことができますか? その API リクエストからのすべてのデータを 1 つの状態にしたいだけです。

これは私が受け取っている現在のエラーです:

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

ありがとう

4

4 に答える 4

18

配列を一緒に「追加」することはできません。array.concat 関数 ( https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/concat ) を使用して、両方の配列を 1 つに連結し、それを状態として設定します。

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

}
于 2016-07-22T15:05:57.953 に答える
2

これには 2 つの問題があります。

1) .then では "this" が定義されていないため、最上位レイヤーに 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));
}
于 2016-07-25T01:22:04.417 に答える