多个 Axios 请求进入 ReactJS 状态

IT技术 javascript reactjs axios
2021-03-24 01:00:36

所以我一直在我的 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(…)

谢谢

4个回答

您不能将数组“添加”在一起。使用 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));

}
这是所有问题中最好和最简单的答案,谢谢。
2021-05-24 01:00:36

这有两个问题:

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

我想提点不一样的。根据react生命周期,您应该更喜欢在componentDidMount()方法中调用 api

“componentDidMount() 在组件安装后立即调用。需要 DOM 节点的初始化应该在这里进行。如果您需要从远程端点加载数据,这是实例化网络请求的好地方。”

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

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)

            }))
    }
您应该提供解释,而不仅仅是纯代码。
2021-06-09 01:00:36
该代码是不言自明的,因此无需进一步解释。如果需要进一步的帮助来理解它,官方文档总是可用的。
2021-06-17 01:00:36