Accessing data returned from promise in Redux
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty{ height:90px;width:728px;box-sizing:border-box;
}
1
I'm trying to access the data of the first dataElement in the array. How can I reach it? I want to console.log it's name.
import React, { Component } from 'react';
class Submit extends Component {
componentDidMount() {
const programStage = this.props.getProgramStage();
if (programStage !== null) {
console.log('Stage loaded...');
}
console.log(this.props.getForm());
}
render() {
return <div />;
}
}
export default Submit;
How the console looks like
arrays reactjs object redux promise
asked Nov 22 '18 at 12:03
SebastianSebastian
86
add a comment |
1
I'm trying to access the data of the first dataElement in the array. How can I reach it? I want to console.log it's name.
import React, { Component } from 'react';
class Submit extends Component {
componentDidMount() {
const programStage = this.props.getProgramStage();
if (programStage !== null) {
console.log('Stage loaded...');
}
console.log(this.props.getForm());
}
render() {
return <div />;
}
}
export default Submit;
How the console looks like
arrays reactjs object redux promise
asked Nov 22 '18 at 12:03
SebastianSebastian
86
add a comment |
1
1
1
I'm trying to access the data of the first dataElement in the array. How can I reach it? I want to console.log it's name.
import React, { Component } from 'react';
class Submit extends Component {
componentDidMount() {
const programStage = this.props.getProgramStage();
if (programStage !== null) {
console.log('Stage loaded...');
}
console.log(this.props.getForm());
}
render() {
return <div />;
}
}
export default Submit;
How the console looks like
arrays reactjs object redux promise
asked Nov 22 '18 at 12:03
SebastianSebastian
86
I'm trying to access the data of the first dataElement in the array. How can I reach it? I want to console.log it's name.
import React, { Component } from 'react';
class Submit extends Component {
componentDidMount() {
const programStage = this.props.getProgramStage();
if (programStage !== null) {
console.log('Stage loaded...');
}
console.log(this.props.getForm());
}
render() {
return <div />;
}
}
export default Submit;
How the console looks like
arrays reactjs object redux promise
arrays reactjs object redux promise
asked Nov 22 '18 at 12:03
SebastianSebastian
86
asked Nov 22 '18 at 12:03
SebastianSebastian
86
asked Nov 22 '18 at 12:03
SebastianSebastian
86
asked Nov 22 '18 at 12:03
SebastianSebastian
86
asked Nov 22 '18 at 12:03
SebastianSebastian
86
86
add a comment |
add a comment |
2 Answers
2
active
oldest
votes
1
As shown in the pic, the promise is resolved. Hence you should be able to access the data like :
this.props.getForm().then((data) => console.log(data[0].name))
answered Nov 22 '18 at 12:07
EaswarEaswar
98910
1
It's from the this.props.getForm() that gives the output. Triedconst getForm = this.props.getForm(); getForm.then(data => console.log(data[0]));but it did not work
– Sebastian
Nov 22 '18 at 12:12
Updated answer.
– Easwar
Nov 22 '18 at 12:13
Hmm, got an unhandled rejection. Unhandled Rejection (TypeError): undefined is not an object (evaluating 'data[0].name')
– Sebastian
Nov 22 '18 at 12:19
That means, the promise is not returned by that method during that particular phase. Would need parent component code to debug more. But IMO as a thumb rule, keep the components stateless as much as possible. If the parent component creates the promise, it should be the one resolving the same and giving the required data to the child. Child component ideally should be stateless and not be knowing about how the data is being fetched. Speaking from clear separation of concerns PoV
– Easwar
Nov 22 '18 at 12:21
Added form as InitialState in Reducer. It does work now. Not entirely sure why.
– Sebastian
Nov 22 '18 at 12:39
|
show 1 more comment
0
It seems that the return type of the call getForm() is a Promise (according to the output). You would need to append a handler via the then method of the promise to actually get the value you are looking for.
E.g.
componentDidMount() {
...
this.props.getForm().then(result => console.log(result))
}
answered Nov 22 '18 at 12:13
rsmidtrsmidt
132
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53430616%2faccessing-data-returned-from-promise-in-redux%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
1
As shown in the pic, the promise is resolved. Hence you should be able to access the data like :
this.props.getForm().then((data) => console.log(data[0].name))
answered Nov 22 '18 at 12:07
EaswarEaswar
98910
1
It's from the this.props.getForm() that gives the output. Triedconst getForm = this.props.getForm(); getForm.then(data => console.log(data[0]));but it did not work
– Sebastian
Nov 22 '18 at 12:12
Updated answer.
– Easwar
Nov 22 '18 at 12:13
Hmm, got an unhandled rejection. Unhandled Rejection (TypeError): undefined is not an object (evaluating 'data[0].name')
– Sebastian
Nov 22 '18 at 12:19
That means, the promise is not returned by that method during that particular phase. Would need parent component code to debug more. But IMO as a thumb rule, keep the components stateless as much as possible. If the parent component creates the promise, it should be the one resolving the same and giving the required data to the child. Child component ideally should be stateless and not be knowing about how the data is being fetched. Speaking from clear separation of concerns PoV
– Easwar
Nov 22 '18 at 12:21
Added form as InitialState in Reducer. It does work now. Not entirely sure why.
– Sebastian
Nov 22 '18 at 12:39
|
show 1 more comment
1
As shown in the pic, the promise is resolved. Hence you should be able to access the data like :
this.props.getForm().then((data) => console.log(data[0].name))
answered Nov 22 '18 at 12:07
EaswarEaswar
98910
1
It's from the this.props.getForm() that gives the output. Triedconst getForm = this.props.getForm(); getForm.then(data => console.log(data[0]));but it did not work
– Sebastian
Nov 22 '18 at 12:12
Updated answer.
– Easwar
Nov 22 '18 at 12:13
Hmm, got an unhandled rejection. Unhandled Rejection (TypeError): undefined is not an object (evaluating 'data[0].name')
– Sebastian
Nov 22 '18 at 12:19
That means, the promise is not returned by that method during that particular phase. Would need parent component code to debug more. But IMO as a thumb rule, keep the components stateless as much as possible. If the parent component creates the promise, it should be the one resolving the same and giving the required data to the child. Child component ideally should be stateless and not be knowing about how the data is being fetched. Speaking from clear separation of concerns PoV
– Easwar
Nov 22 '18 at 12:21
Added form as InitialState in Reducer. It does work now. Not entirely sure why.
– Sebastian
Nov 22 '18 at 12:39
|
show 1 more comment
1
1
1
As shown in the pic, the promise is resolved. Hence you should be able to access the data like :
this.props.getForm().then((data) => console.log(data[0].name))
answered Nov 22 '18 at 12:07
EaswarEaswar
98910
As shown in the pic, the promise is resolved. Hence you should be able to access the data like :
this.props.getForm().then((data) => console.log(data[0].name))
answered Nov 22 '18 at 12:07
EaswarEaswar
98910
edited Nov 22 '18 at 12:13
answered Nov 22 '18 at 12:07
EaswarEaswar
98910
answered Nov 22 '18 at 12:07
EaswarEaswar
98910
answered Nov 22 '18 at 12:07
EaswarEaswar
98910
98910
1
It's from the this.props.getForm() that gives the output. Triedconst getForm = this.props.getForm(); getForm.then(data => console.log(data[0]));but it did not work
– Sebastian
Nov 22 '18 at 12:12
Updated answer.
– Easwar
Nov 22 '18 at 12:13
Hmm, got an unhandled rejection. Unhandled Rejection (TypeError): undefined is not an object (evaluating 'data[0].name')
– Sebastian
Nov 22 '18 at 12:19
That means, the promise is not returned by that method during that particular phase. Would need parent component code to debug more. But IMO as a thumb rule, keep the components stateless as much as possible. If the parent component creates the promise, it should be the one resolving the same and giving the required data to the child. Child component ideally should be stateless and not be knowing about how the data is being fetched. Speaking from clear separation of concerns PoV
– Easwar
Nov 22 '18 at 12:21
Added form as InitialState in Reducer. It does work now. Not entirely sure why.
– Sebastian
Nov 22 '18 at 12:39
|
show 1 more comment
1
It's from the this.props.getForm() that gives the output. Triedconst getForm = this.props.getForm(); getForm.then(data => console.log(data[0]));but it did not work
– Sebastian
Nov 22 '18 at 12:12
Updated answer.
– Easwar
Nov 22 '18 at 12:13
Hmm, got an unhandled rejection. Unhandled Rejection (TypeError): undefined is not an object (evaluating 'data[0].name')
– Sebastian
Nov 22 '18 at 12:19
That means, the promise is not returned by that method during that particular phase. Would need parent component code to debug more. But IMO as a thumb rule, keep the components stateless as much as possible. If the parent component creates the promise, it should be the one resolving the same and giving the required data to the child. Child component ideally should be stateless and not be knowing about how the data is being fetched. Speaking from clear separation of concerns PoV
– Easwar
Nov 22 '18 at 12:21
Added form as InitialState in Reducer. It does work now. Not entirely sure why.
– Sebastian
Nov 22 '18 at 12:39
1
1
It's from the this.props.getForm() that gives the output. Tried
const getForm = this.props.getForm(); getForm.then(data => console.log(data[0]));but it did not work– Sebastian
Nov 22 '18 at 12:12
It's from the this.props.getForm() that gives the output. Tried
const getForm = this.props.getForm(); getForm.then(data => console.log(data[0]));but it did not work– Sebastian
Nov 22 '18 at 12:12
Updated answer.
– Easwar
Nov 22 '18 at 12:13
Updated answer.
– Easwar
Nov 22 '18 at 12:13
Hmm, got an unhandled rejection. Unhandled Rejection (TypeError): undefined is not an object (evaluating 'data[0].name')
– Sebastian
Nov 22 '18 at 12:19
Hmm, got an unhandled rejection. Unhandled Rejection (TypeError): undefined is not an object (evaluating 'data[0].name')
– Sebastian
Nov 22 '18 at 12:19
That means, the promise is not returned by that method during that particular phase. Would need parent component code to debug more. But IMO as a thumb rule, keep the components stateless as much as possible. If the parent component creates the promise, it should be the one resolving the same and giving the required data to the child. Child component ideally should be stateless and not be knowing about how the data is being fetched. Speaking from clear separation of concerns PoV
– Easwar
Nov 22 '18 at 12:21
That means, the promise is not returned by that method during that particular phase. Would need parent component code to debug more. But IMO as a thumb rule, keep the components stateless as much as possible. If the parent component creates the promise, it should be the one resolving the same and giving the required data to the child. Child component ideally should be stateless and not be knowing about how the data is being fetched. Speaking from clear separation of concerns PoV
– Easwar
Nov 22 '18 at 12:21
Added form as InitialState in Reducer. It does work now. Not entirely sure why.
– Sebastian
Nov 22 '18 at 12:39
Added form as InitialState in Reducer. It does work now. Not entirely sure why.
– Sebastian
Nov 22 '18 at 12:39
|
show 1 more comment
0
It seems that the return type of the call getForm() is a Promise (according to the output). You would need to append a handler via the then method of the promise to actually get the value you are looking for.
E.g.
componentDidMount() {
...
this.props.getForm().then(result => console.log(result))
}
answered Nov 22 '18 at 12:13
rsmidtrsmidt
132
add a comment |
0
It seems that the return type of the call getForm() is a Promise (according to the output). You would need to append a handler via the then method of the promise to actually get the value you are looking for.
E.g.
componentDidMount() {
...
this.props.getForm().then(result => console.log(result))
}
answered Nov 22 '18 at 12:13
rsmidtrsmidt
132
add a comment |
0
0
0
It seems that the return type of the call getForm() is a Promise (according to the output). You would need to append a handler via the then method of the promise to actually get the value you are looking for.
E.g.
componentDidMount() {
...
this.props.getForm().then(result => console.log(result))
}
answered Nov 22 '18 at 12:13
rsmidtrsmidt
132
It seems that the return type of the call getForm() is a Promise (according to the output). You would need to append a handler via the then method of the promise to actually get the value you are looking for.
E.g.
componentDidMount() {
...
this.props.getForm().then(result => console.log(result))
}
answered Nov 22 '18 at 12:13
rsmidtrsmidt
132
answered Nov 22 '18 at 12:13
rsmidtrsmidt
132
answered Nov 22 '18 at 12:13
rsmidtrsmidt
132
answered Nov 22 '18 at 12:13
rsmidtrsmidt
132
132
add a comment |
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53430616%2faccessing-data-returned-from-promise-in-redux%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
