多爱可信请求分为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