I am making two api GET requests, and with both I would like the state to update. For some reason it is only updating with the values from the first GET request.
I have tried using the spread operator to update the state and add in new values to current state (categories) from the GET requests.
axios // first get request
.get(
"LINK_TO_API"
)
.then(res => {
this.setState({
...this.state.categories,
categories: res.data.data
});
})
.catch(function(error) {
console.log(error);
});
axios // second get request
.get(
"LINK_TO_API"
)
.then(res => {
this.setState({
...this.state.categories,
categories: res.data.data
});
})
.catch(function(error) {
console.log(error);
});
I am currently getting 10 values from first GET request and would like to get the total of 20 values when I map through categories.
You will never get 20 values, due to are not appending values, you just are overwriting categories values in each call.
this.setState({
...this.state.categories,
categories: res.data.data
});
Here categories: res.data.data is being overwrited.
Just modify your code to:
axios
.get(
"LINK_TO_API"
)
.then(res => {
this.setState((state) => ({
...state,
categories: [...state.categories, ...res.data.data]
}));
})
.catch(function(error) {
console.log(error);
});
First of all, your spread operator is wrong, you have to wrap it into array categories: [...this.state.categories, ...res.data.data]. Also I advice you to wait all your post loaded and then set them to state:
Promise.all([axios.get('LINK_TO_API'), axios.get('LINK_TO_API_2')])
.then(allYourPosts => {
this.setState({ /* set it to state */ });
})
.catch((error) => {
console.log(error);
});
Assuming that categories is an array, you are overriding one array with another array.
In the code below, i am always returning a new array, and concating the new array with the previous array.
axios // first get request
.get('LINK_TO_API')
.then(res => {
this.setState({
categories: [...this.state.categories, ...res.data.data]
});
})
.catch(function(error) {
console.log(error);
});
axios // second get request
.get('LINK_TO_API')
.then(res => {
this.setState({
categories: [...this.state.categories, ...res.data.data]
});
})
.catch(function(error) {
console.log(error);
});
Related
I have a model called Event, after updating the Event, when I try to update the change to the view with componentDidUpdate it keeps looping forever (infinite loop). I have searched and saw people that had the same problem but I can't seem to get it working.
here is my componentDidUpdate inside EventComments component
componentDidUpdate() {
axios
.get(
"http://localhost:9000/events/" +
this.props.match.params.id +
"/eventcomments"
)
.then((response) => {
this.setState({ event: response.data });
this.setState({ eventcomments: response.data.eventcomments });
})
.catch(function (error) {
console.log(error);
});
}
Please what should I do to get this infinite loop to stop?
You need to wrap your event in a conditional. Reference from the docs:
componentDidUpdate(prevProps) {
// Typical usage (don't forget to compare props):
if (this.props.userID !== prevProps.userID) {
this.fetchData(this.props.userID);
}
}
Your example:
componentDidUpdate(prevProps) {
if(prevProps.id !== this.props.match.params.id){
axios
.get(
"http://localhost:9000/events/" +
this.props.match.params.id +
"/eventcomments"
)
.then((response) => {
this.setState({ event: response.data });
this.setState({ eventcomments: response.data.eventcomments });
})
.catch(function (error) {
console.log(error);
});
}
}
after so many tries, I have managed to make it work. but, if you know a better way of doing it than this, please let me know.
Here is my what I did
componentDidUpdate(prevProps, prevState) {
if (prevState.event === this.state.event) {
axios
.get(
"http://localhost:9000/events/" +
this.props.match.params.id +
"/eventcomments"
)
.then((response) => {
this.setState({ event: response.data });
})
.catch(function (error) {
console.log(error);
});
}
}
UPDATE:
axios
.get("https://cors-anywhere.herokuapp.com/" + "https://api.linkedin.com/v2/me", config)
.then(response => {
this.setState({profile: response.data})
})
^ saved the object in state for me :) Thanks everyone!!
I am a newbie to react. I am trying to save a single object from a JSON end point into the state of my react component. I am definitely returning the JSON data in the response. However it is not being saved into the state, can you see where I am going wrong?
// State needed for the component
constructor(props) {
super(props);
this.state = {
profile: {},
};
}
// Grabs profile data from the json url
private getProfile() {
let config = {
headers: {'Authorization':'Bearer AQVVEqNXTWV....'}
}
axios
.get("https://cors-anywhere.herokuapp.com/" + "https://api.linkedin.com/v2/me", config)
.then(response =>
response.data(profile => ({
id: `${ profile.id }`
}))
)
.then(profile => {
this.setState({
profile
});
})
// We can still use the `.catch()` method since axios is promise-based
.catch(error => this.setState({ error, isLoading: false }));
}
JOSN data returned:
{
"localizedLastName": "King",
"id": "fm0B3D6y3I",
"localizedFirstName": "Benn"
}
Your first then block looks wrong.
Try to do console.log there like this:
.then(response => {
console.log(response); // I am sure that you will get profile inside response.data or something similar
return response.data(profile => ({
id: `${ profile.id }`
}));
})
If you want to keep your first then that "prepares the data", then you should return a promise instead of data, like:
let config = {
headers: {'Authorization':'Bearer AQVVEqNXTWV....'}
}
axios
.get("https://cors-anywhere.herokuapp.com/" + "https://api.linkedin.com/v2/me", config)
.then(response => {
return new Promise((resolve, reject) => {
resolve( {
id: `${ response.data.id }`
});
});
}
)
.then(profile => {
this.setState({
profile
});
})
// We can still use the `.catch()` method since axios is promise-based
.catch(error => this.setState({ error, isLoading: false }));
Here's an example of how that would work:
I do believe that's a bit of an overkill though and you should be able to just set your state in the first then such as:
this.setState({profile: {id : response.data.id}});
Try to remove the second then, like this:
axios
.get("https://cors-anywhere.herokuapp.com/" + "https://api.linkedin.com/v2/me", config)
.then(response => {this.setState({ profile: response.data })};
})
}))
I able to get the right data from my API node.js server. however when i try to setstate the object to render it it keeps returning null
i tried to use spread operator before the response but it still not working
import React, { Component } from "react";
import axios from "axios";
class Profile extends Component {
constructor(props) {
super(props);
this.state = {
UserData: null,
isLoading: false,
error: null
};
}
componentDidMount() {
this.setState({ isLoading: true });
axios
.get(
`http://localhost:5000/api/v1/profile/${this.props.match.params.platform}/${this.props.match.params.gamertag}`
)
.then(response => {
console.log(response.data);
})
.then(response => {
this.setState({
UserData: response.data,
isLoading: false
});
})
.catch(error => this.setState({ error, isLoading: false }));
}
render() {
const { isLoading, UserData } = this.state;
if (isLoading) {
return <p>Loading ...</p>;
}
console.log(UserData);
return <div>{UserData}</div>;
}
}
export default Profile;
when i try to log. the UserData log "null", but the "console.log(response.data)" works fine so it have to do something with the setState
when you chain data method like .then(), the following chained methods automatically receive value returned by the previous function.
getData
.then(res => console.log(res))
console.log itself will return nothing, thus the following .then() method will receive nothing.
getData
.then(res => console.log(res))
.then(data => console.log(data))
So if you do this, the second console.log() will log null.
You can fix it by returning something in your console.log step:
getData
.then(data => {
console.log(data);
return data;
})
.then(data => this.setState({ data: data }));
And the second console.log() will log properly.
You don't need two chain two then()'s, you can get the response and set the state after .then()
componentDidMount() {
this.setState({ isLoading: true });
axios
.get(
`http://localhost:5000/api/v1/profile/${this.props.match.params.platform}/${this.props.match.params.gamertag}`
)
.then(response => {
this.setState({
UserData: response.data,
isLoading: false
});
})
.catch(error => this.setState({ error, isLoading: false }));
}
I'm new with React and apis. I'm trying to make 2 get requests and assign 2 keys with their new values to "items" array. Here the "img" key coming from the second get request keeps overriding the whole object. So, it makes the first get request as if it doesn't exist. I need to just append the second key with the first key-values coming from the first fetch. Hope that does make sense.
fetch(url,{
method: 'GET'
})
.then((response)=> response.json())
.then((responseJson) => {
const newItems = responseJson.items.map(i => {
return{
name: i.name
};
})
const newState = Object.assign({}, this.state, {
items: newItems
});
console.log(newState);
this.setState(newState);
})
.catch((error) => {
console.log(error)
});
fetch(url2,{
method: 'GET'
})
.then((response)=> response.json())
.then((responseJson) => {
const newItems = responseJson.ebay.map(i => {
return{
img: i.picture.url[0]
};
})
const newState = Object.assign(this.state, {
items: newItems
});
console.log(newState);
this.setState(newState);
})
.catch((error) => {
console.log(error)
});
You can use this for the second request:
const newState = {
items: [...this.state.items, ...newItems]
}
this.setState(newState);
In my main component, I am fetching the api data and setting it to a state. Rather than an object, I'd prefer it to be in an array. Is there any way I can do this during the fetch and just make the object the first index(and only) index in an array?
fetch('https://api.aes/latest')
.then(response => {
return response.json();
})
.then(json => {
this.setState({
launchData: json,
});
You can use React#spread operator on object.
.then(json => {
this.setState({
launchData: [...json],
});
You might try
fetch('https://api.aes/latest')
.then(response => {
return response.json();
})
.then(json => {
this.setState({
launchData: [json],
});