I could get data from nodejs backend to react frontend using axios. But I can't assign that object to state object in React.
getData=()=>{
let responseToHandle;
axios.get("http://localhost:9000/api/getData")
.then(function (response)
{
console.log(response.data);//This is working
responseToHandle = response.data;
console.log(responseToHandle);//This is working
this.setState({
data: responseToHandle}, () => {
console.log(this.state.data)
})
})
// HERE IS MY STATE OBJECT
state={
data:[]
}
axios call and this.setState are both asynchronous.
You must add your desired code inside a callback:
this.setState({
data: responseToHandle
}, () => {
console.log(this.state.data)
// Now you can use this.state.data
});
Edit:
You also need to change
axios.get("http://localhost:9000/api/getData").then(function (response) { ... })
to
axios.get("http://localhost:9000/api/getData").then(response => { ... })
Without arrow function the scope inside .then() is the function scope, different from component scope, which means using this gives you a different value.
This code won't work properly:
console.log(this.state.data)
You called a console.log function synchronously right after a promise declaration. Promise works asynchronously.
So in order to check a new state, you should call console.log in render() method, or the best option is to use componentDidUpdate() method.
E.g.
componentDidUpdate(prevProps, prevState) {
console.log(`Previous data: ${prevState.data}`);
console.log(`New data: ${this.state.data}`);
}
Related
I ran into troubles trying to process data fetched from remote API.
The app is running VueJS with Vuetify, data is formatted with Vuetify's data table component.
This is my code:
export default {
data () {
return {
headers: [
{ text: 'City', value: 'city' },
{ text: '#Citizens', value: 'citizens' },
{ text: '#Schools', value: 'schools' },
{ text: 'Schools per Citizen', value: 'schoolsPerCitizen' },
(...)
API URL is defined as a variable on the root level of the app.
Then, there is this method launched when created() kicks in:
methods: {
loadData() {
axios.get(citiesApiUrl)
.then((response) => {
console.log(response.data) // data displayed correctly
return response.data
})
.catch(error => {console.error(error)})
}
},
created () {
this.loadData()
}
As you noticed in the comment, response.data does display desired values.
Problems start from this point:
computed: {
stats() {
return this.loadData().map(item => {
item.schoolsPerCitizen = (item.schools / item.citizens).toFixed(2)
return item
})
}
}
I get an error: TypeError: Cannot read property 'map' of undefined.
Any ideas what is wrong with my code?
Issues
When loadData is called in created, the axios promise is consumed but nothing happens with the returned data except it's logged and returned to the promise resolver.
When loadData is called in stats (computed), .map is chained off of the return value from loadData, but loadData has no return value.
Even if loadData returned the axios promise, that promise would have to be consumed in stats first before accessing the data (needs .then)
The design is flawed because the computed will make an identical API call every time it recalculates, which is likely unnecessary.
Also, the promise returned by stats wouldn't be resolved by the template render function anyway.
Fix
Create a variable for the loaded data (I'll call it mydata):
data() {
return {
// ...
mydata: []
}
}
Change loadData to:
loadData() {
axios.get(citiesApiUrl).then((response) => {
this.mydata = response.data // <--- Set the data to `mydata`
}).catch(error => {
console.error(error)
})
}
Change stats to:
stats() {
// This is also not designed properly, it's going to mutate `mydata`...
// You should study Vue and learn what the purpose for computeds are before using them
return this.mydata.map(item => { // <-- Once `mydata` is populated, this will recalculate
item.schoolsPerCitizen = (item.schools / item.citizens).toFixed(2)
return item
})
}
loadData does not return any value.
loadData() {
return axios.get(citiesApiUrl)
.then((response) => {
console.log(response.data) // data displayed correctly
return response.data
})
.catch(error => {console.error(error)})
}
React Doc says
Because this.props and this.state may be updated asynchronously, you should not rely on their values for calculating the next state
Does this mean that i can't trust this.state at any place?
For example:
MyComponent extends Component {
// ...
handleClick () {
// ...
fetch(targetUrl, {
method: 'POST',
body: JSON.stringify({
param1: this.state.param1
})
})
}
// ...
}
Does it mean that i may send wrong param1 to targetUrl(Since this.state may not been updated yet)?
set state is asyncchronus . if you want to do something with state like
this.setState({param1:true},()=>{
fetch(targetUrl, {
method: 'POST',
body: JSON.stringify({
param1: this.state.param1
})
})
})
it takes a call back where you can get state after state is updated and perform action with the updated one.. hope it helps :)
It depends on what you do when handleClick.
If your handleClick method is like this:
handleClick () {
this.setState({ param1: 'something'});
fetch(targetUrl, {
method: 'POST',
body: JSON.stringify({
param1: this.state.param1
})
})
}
Then when you call fetch, the this.state.param1 is not updated yet. because setState is asynchronous.
And if you don't setState in handleClick, then you will be fine with your code.
Read more about setState Beware: React setState is asynchronous!
It means this.setState({}) updates state asynchronously and not instantly. Reaat will decide when to update the state via this.setState({}).
So if you do this.setState({data: response}), it is not guaranteed that it will state instantly, it might take some time to update it.
You can check this using below code:
this.setState({data: response}, () => console.log('state updated'));
Above is updating state and when updated it will execute call back method.
I am working in a small application for a class I am taking and I have an issue when I am using the fetch API
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
map: "",
markers: [],
Data: []
};
}
componentDidMount() {
fetch(
`https://api.foursquare.com/v2/venues/explore?near=ashkelon&v=20180729&client_id=MVLZGLPIAITJITM0OOFYER3C2ZRT5ERGGEWCC0T1YWV3HFZA&client_secret=1TBLTY0TSM1T320FEO3BJBGTMYVQPCMBOGO5GEBC0ZB1E5LK`
)
.then(function(response) {
return response.json();
})
.then(
function(data) {
this.setState({ Data: data });
}.bind(this)
)
.catch(function(e) {
console.log("There is an issue with getting the information", e);
});
}
}
window.initMap = this.initMap;
loadJS("https://maps.googleapis.com/maps/api/js?key=AIzaSyDySeqpuOjQlckWJUMlbSW_w5CydOVTWJI&callback=initMap");
UPDATE :
this will not provide with an error and the state is set, but what now happens is that my state is empty when i log the state in the initMap method.
At this point i see that the state is set for "that".
But if its set for "that" how can i use "this" state in the rest of my application i need this information to create markers on the google maps API
thanks in advance.
The problem is that this is undefined in your anonymous function. By assigning const that = this, you make the context from componentDidMount() available in all of the anonymous functions. Another solution is to bind() all functions with the correct context. For example
...
.then((function(data) {
this.setState({Data: data.response.groups[0]})
console.log(this.state.Data);
}).bind(this))
...
Now you can remove the declaration for that.
If you don't really care about IE11 support (and does not use Babel) please consider using arrow functions (it's syntax sugar for functions that have the same this as the this around them)
Note that string literals like you used, have similar compatibility table as arrow functions so you lose nothing and gain much cleaner code!
The code with arrow functions looks like this:
componentDidMount() {
/* ... */
fetch(`URL`)
.then(response => response.json())
.then(data => this.setState({Data: data.response.groups[0]}))
.catch(e => console.log('There is an issue with getting the information' , e))
/* ... */
}
I am trying to separate my axios calls from my main vue instance by importing them instead of calling them directly in the created hook.
I have this in a separate file called data.js
import axios from 'axios'
export default{
myData() {
return axios.get(`http://localhost:8080/data.json`)
.then(response => {
// JSON responses are automatically parsed.
return response.data;
})
.catch(e => {
return this.myErrors.push(e)
});
},
And in my vue instance I have the following:
import myDataApi from '#/api/data.js'
export default {
name: 'app',
components: {
myDataApi, // not sure if this is correct
},
data: function () {
return {
myInfo: '',
}
},
created() {
this.myInfo = myDataApi.myData();
console.log('this.myInfo= ', this.myInfo)
},
I am trying to populate myInfo with the json called by myData. This returns [object Promise] in Vue devtools and the as Promise {<pending>} in the console.
All the data I need is inside that Promise {<pending>} in an array called [[PromiseValue]]:Object so I know it is working, I just need to know the correct way implementing this.
I don't have a development environment enabled to test this at the moment, but I do notice that you are trying to assign a variable the moment that the component is initialized. This object is a promise, but you're not handling the promise after it is resolved inside the component where you have imported it.
I would recommend trying to handle the promise inside of the actual component, something like:
import myDataApi from '#/api/data.js'
export default {
name: 'app',
components: {
myDataApi, // not sure if this is correct
},
data: function () {
return {
myInfo: '',
}
},
created() {
myDataApi.myData()
.then((data) => {
this.myInfo = data
console.log('this.myInfo= ', this.myInfo);
});
.catch((e) => handleError) // however you want to handle it
},
Just to add to #LexJacobs answer. I omitted the parenthesis around data in .then() as seen below. Vue was squawking about data not being available even though it was. This solved that problem, although to be honest I don't know why.
myDataApi.myData()
.then(data => {
this.dataHasLoaded = true;
this.myInfo = data;
})
.catch(e => {
this.myErrors.push(e)
});
I have a function that should return an array of objects when called. The function looks like this
loadTodo(): Todo[]{
var data
this.http.get(`${this.API_URL}todos`).toPromise().then(res => {
data = res.json()
}, error => {
console.log(error)
})
return data}
This results in unexpected behavior where data variable gets assigned correctly inside the success response block but is undefined when accessed outside the response block.
The function is assigned to a variable with type Todo[] and is invoked immediately when the variable is declared. I am quite new to TypeScript and Angular but not to JavaScript. Am I missing something with scope/closure of the function or is this issue related to TypeScript/Angular?
Whole class looks like this:
export class TodoDataService {
API_URL: String = 'http://localhost:3000/'
todos: Todo[] = this.loadTodo();
constructor(private http: Http) {
}
loadTodo(): Todo[]{
this.http.get(`${this.API_URL}todos`).toPromise().then(res => {
this.parcedTodos = res.json()
console.log('inside function')
console.log(this.parcedTodos)
}, error => {
console.log(error)
})
console.log('outside function')
console.log(this.parcedTodos)
return this.parcedTodos
}
}
http.get() is asynchronous, which means that when you try to print parcedTodos outside the then callback, it will still be undefined.
Asynchronous programming in JS
It is happening because http calls are asynchronous.
You need to make sure you are accessing data only after call is completed.
export class TodoDataService {
API_URL: String = 'http://localhost:3000/'
todos: Todo[] = this.loadTodo();
constructor(private http: Http) {
}
loadTodo(): Todo[]{
this.http.get(`${this.API_URL}todos`).toPromise().then(res => {
this.parcedTodos = res.json()
console.log('inside function')
console.log(this.parcedTodos)
}, error => {
console.log(error)
},
{
console.log(this.parcedTodos);
// This is where your call gets completed. Here you can access assigned data or call another function where you can access data.
})
console.log('outside function')
console.log(this.parcedTodos) // This is called before asynchronous call is completed. Thats why it is undefined yet.
return this.parcedTodos
}
}
Hope this helps.
this.http.get(whatever) is an async call.
Your data is undefined because you're accessing it before it is actually initialized. i.e. you're initializing it inside the success handler (the first argument to then), and probably are accessing it before initialization.
All you need to do is make sure you're doing so after the success or error handler. use Observable
I think that using res.json() not is neccesary because angular pipes already doing this works. Do you try to assign to variable res directly?
As others friends says, you are doing bad some things.
First: you must read about asynchronous methods
Second: use Observables importing rxjs/Observable; and follow its callbacks flow
Example
export class TodoDataService {
API_URL: String = 'http://localhost:3000/'
todos: Todo[] = this.loadTodo();
constructor(private http: Http) {
}
loadTodo() : Observable<Todo[]>{
return this.http.get(`${this.API_URL}todos`);
}
}
And other class consummes this method
todoDataService.loadTodo().subscribe(
(response) => {
console.log("Future response", response);
}
);