React: How to handle components/state inside single page application?
I developing a Sharepoint Online Form which is using react. Sharepoint Online uses single page like navigation, meaning no real page reload/refresh.
The form loads data vi a http request. But the state is showing containing old data. Only after hard refresh/cache clear the state contains the correct data.
My issues is that due to the navigation my react state is not getting properly updated. I'm getting data async:
public componentDidMount(): void {
this._renderListAsync();
}
_renderListAsync() makes a http requests and sets the state:
._renderListAsync()
.get("xxx.xxx.xxx") // HTTP request
.then((response) => {
this.setState({item:response});
}
The intent is to load data every time the users goes to the site.
When I clear the cache and hard reload my states is updated to the correct one.
But when the users navigates back and forth between different sites React just adds more componentet:
Is this intended?
How can I make sure the state is being updated correctly and that i unmount old components?
reactjs sharepoint-online spfx
asked Nov 26 '18 at 13:02
TietjeDKTietjeDK
402724
add a comment |
I developing a Sharepoint Online Form which is using react. Sharepoint Online uses single page like navigation, meaning no real page reload/refresh.
The form loads data vi a http request. But the state is showing containing old data. Only after hard refresh/cache clear the state contains the correct data.
My issues is that due to the navigation my react state is not getting properly updated. I'm getting data async:
public componentDidMount(): void {
this._renderListAsync();
}
_renderListAsync() makes a http requests and sets the state:
._renderListAsync()
.get("xxx.xxx.xxx") // HTTP request
.then((response) => {
this.setState({item:response});
}
The intent is to load data every time the users goes to the site.
When I clear the cache and hard reload my states is updated to the correct one.
But when the users navigates back and forth between different sites React just adds more componentet:
Is this intended?
How can I make sure the state is being updated correctly and that i unmount old components?
reactjs sharepoint-online spfx
asked Nov 26 '18 at 13:02
TietjeDKTietjeDK
402724
Can you describe how_renderListAsync()sets the state?
– theapologist
Nov 26 '18 at 13:04
Added pesudo code to show the_renderListAsync().
– TietjeDK
Nov 26 '18 at 13:08
componentDidMount()is executed just once when a component is rendered for the first time. You need to completely remove your component not just hiding it in order to execute the fetch again
– Nedko Dimitrov
Nov 26 '18 at 13:29
How can I completely remove it?
– TietjeDK
Nov 26 '18 at 13:31
add a comment |
I developing a Sharepoint Online Form which is using react. Sharepoint Online uses single page like navigation, meaning no real page reload/refresh.
The form loads data vi a http request. But the state is showing containing old data. Only after hard refresh/cache clear the state contains the correct data.
My issues is that due to the navigation my react state is not getting properly updated. I'm getting data async:
public componentDidMount(): void {
this._renderListAsync();
}
_renderListAsync() makes a http requests and sets the state:
._renderListAsync()
.get("xxx.xxx.xxx") // HTTP request
.then((response) => {
this.setState({item:response});
}
The intent is to load data every time the users goes to the site.
When I clear the cache and hard reload my states is updated to the correct one.
But when the users navigates back and forth between different sites React just adds more componentet:
Is this intended?
How can I make sure the state is being updated correctly and that i unmount old components?
reactjs sharepoint-online spfx
asked Nov 26 '18 at 13:02
TietjeDKTietjeDK
402724
I developing a Sharepoint Online Form which is using react. Sharepoint Online uses single page like navigation, meaning no real page reload/refresh.
The form loads data vi a http request. But the state is showing containing old data. Only after hard refresh/cache clear the state contains the correct data.
My issues is that due to the navigation my react state is not getting properly updated. I'm getting data async:
public componentDidMount(): void {
this._renderListAsync();
}
_renderListAsync() makes a http requests and sets the state:
._renderListAsync()
.get("xxx.xxx.xxx") // HTTP request
.then((response) => {
this.setState({item:response});
}
The intent is to load data every time the users goes to the site.
When I clear the cache and hard reload my states is updated to the correct one.
But when the users navigates back and forth between different sites React just adds more componentet:
Is this intended?
How can I make sure the state is being updated correctly and that i unmount old components?
reactjs sharepoint-online spfx
reactjs sharepoint-online spfx
asked Nov 26 '18 at 13:02
TietjeDKTietjeDK
402724
asked Nov 26 '18 at 13:02
TietjeDKTietjeDK
402724
edited Nov 26 '18 at 13:08
TietjeDK
asked Nov 26 '18 at 13:02
TietjeDKTietjeDK
402724
asked Nov 26 '18 at 13:02
TietjeDKTietjeDK
402724
asked Nov 26 '18 at 13:02
TietjeDKTietjeDK
402724
402724
Can you describe how_renderListAsync()sets the state?
– theapologist
Nov 26 '18 at 13:04
Added pesudo code to show the_renderListAsync().
– TietjeDK
Nov 26 '18 at 13:08
componentDidMount()is executed just once when a component is rendered for the first time. You need to completely remove your component not just hiding it in order to execute the fetch again
– Nedko Dimitrov
Nov 26 '18 at 13:29
How can I completely remove it?
– TietjeDK
Nov 26 '18 at 13:31
add a comment |
Can you describe how_renderListAsync()sets the state?
– theapologist
Nov 26 '18 at 13:04
Added pesudo code to show the_renderListAsync().
– TietjeDK
Nov 26 '18 at 13:08
componentDidMount()is executed just once when a component is rendered for the first time. You need to completely remove your component not just hiding it in order to execute the fetch again
– Nedko Dimitrov
Nov 26 '18 at 13:29
How can I completely remove it?
– TietjeDK
Nov 26 '18 at 13:31
Can you describe how
_renderListAsync() sets the state?– theapologist
Nov 26 '18 at 13:04
Can you describe how
_renderListAsync() sets the state?– theapologist
Nov 26 '18 at 13:04
Added pesudo code to show the
_renderListAsync().– TietjeDK
Nov 26 '18 at 13:08
Added pesudo code to show the
_renderListAsync().– TietjeDK
Nov 26 '18 at 13:08
componentDidMount() is executed just once when a component is rendered for the first time. You need to completely remove your component not just hiding it in order to execute the fetch again– Nedko Dimitrov
Nov 26 '18 at 13:29
componentDidMount() is executed just once when a component is rendered for the first time. You need to completely remove your component not just hiding it in order to execute the fetch again– Nedko Dimitrov
Nov 26 '18 at 13:29
How can I completely remove it?
– TietjeDK
Nov 26 '18 at 13:31
How can I completely remove it?
– TietjeDK
Nov 26 '18 at 13:31
add a comment |
0
active
oldest
votes
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
});
}
});
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%2f53481723%2freact-how-to-handle-components-state-inside-single-page-application%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
0
active
oldest
votes
0
active
oldest
votes
active
oldest
votes
active
oldest
votes
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.
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%2f53481723%2freact-how-to-handle-components-state-inside-single-page-application%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
Can you describe how
_renderListAsync()sets the state?– theapologist
Nov 26 '18 at 13:04
Added pesudo code to show the
_renderListAsync().– TietjeDK
Nov 26 '18 at 13:08
componentDidMount()is executed just once when a component is rendered for the first time. You need to completely remove your component not just hiding it in order to execute the fetch again– Nedko Dimitrov
Nov 26 '18 at 13:29
How can I completely remove it?
– TietjeDK
Nov 26 '18 at 13:31