Menu
So I have been placing the following code within my React JS component and I am basically trying to put both API calls into one state called vehicles however I am getting an error with the following code:
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));
}
Now I am guessing I can't add two sources of data like I have this.setState({ vehicles: seat.data + volkswagen.data }) however how else can this be done? I just want all of the data from that API request to be put into the one state.
This is the current error I am receiving:
TypeError: Cannot read property 'setState' of null(…)
Thanks
683
Since axios returns a Promise we can go for multiple requests by using Promise. all , luckily axios itself also ships with a function called all , so let us use that instead and add two more requests. Again we define the different URLs we want to access.
axios. all is a helper method built into Axios to deal with concurrent requests. Instead of making multiple HTTP requests individually, the axios. all method allows us to make multiple HTTP requests to our endpoints altogether.
How to Make Axios Post Request in React JS App 1 Create React App 2 Set up Bootstrap 4 3 Create POST Request Component. In this step, /src/ directory and create a component, which name User.js. 4 Add Component in App.js. How to make Axios POST HTTP request in React js app, you have learned how to use Axios POST HTTP request in react ...
To perform a GET request, you use the .get () method. Axios does more with less code. Unlike the Fetch API, you only need one .then () callback to access your requested JSON data.
Now you can call useAxios at the top of the app component, pass in the URL you want to make a request to, and the hook returns an object with all the values you need to handle the different states: loading, error and the resolved data. In the process of performing this request, the value loading will be true.
While you can make this custom hook yourself, there's a very good library that gives you a custom useAxios hook called use-axios-client. First, install the package: To use the hook itself, import useAxios from use-axios-client at the top of the component. Because you no longer need useEffect, you can remove the React import:
You cannot "add" arrays together. Use the array.concat function (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/concat) to concatenate both arrays into one and then set that as the state.
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));
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
