web-dev-qa-db-ja.com

ReactJS状態への複数のAxiosリクエスト

だから私はReact JSコンポーネント内に次のコードを配置しており、基本的に両方のAPI呼び出しをvehiclesという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) {
      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 })を持っているように2つのデータソースを追加できないと推測していますが、他にどのようにこれを行うことができますか？そのAPIリクエストからのすべてのデータを1つの状態にしたいだけです。

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

_TypeError: Cannot read property 'setState' of null(…)
_

ありがとう

javascriptreactjsaxios
11
Nick Maddren

配列を一緒に「追加」することはできません。 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));

}
16
erichardson30

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

1）.thenでは、「this」は未定義なので、これへの参照を最上位層に保存する必要があります。

2）他の答えが述べたように、JSでは配列を一緒に追加することはできず、concatを使用する必要がありますが、それらはサーバー応答であるため、どちらかがエラーを停止するためにデフォルトを追加しますtは実際に何かを返します。

すべて一緒に、私はそれが次のように見えるはずだと思う：

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));
}
2
Ben Hare

何か違うことを言いたいです。反応のライフサイクルによると、componentDidMount()メソッドでAPIを呼び出すことをお勧めします。

「componentDidMount（）は、コンポーネントがマウントされた直後に呼び出されます。DOMノードを必要とする初期化はここに行く必要があります。リモートエンドポイントからデータをロードする必要がある場合、これはネットワーク要求をインスタンス化するのに適した場所です」

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

2
yasinv
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)

            }))
    }
0
Rinoyrix