React.js: After updating form, not able to get updated value (`componentWillReceive`) inside a component
0
We get a form from the server that we allow the user to edit and are using lodash _.set(object, path, value) to update parts of that form depending on what part of the form the user updates.
We are trying to get the current value by setting the state inside the component but getting this error;
Uncaught Error: Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops
Our function looks like;
onChange = ({ form }) => {
const { path, editKeyword } = this.props;
const inputValue = form[editKeyword];
let prevForm = this.props.form;
// update the object using
const updatedForm = _.set(prevForm, path, inputValue);
// action
this.props.setCurrentForm(updatedForm); };
We also tried the following with no luck:
onChange = ({ form }) => {
const { path, editKeyword } = this.props;
const inputValue = form[editKeyword];
console.log("input value ", inputValue);
let prevForm = this.props.form;
const updatedForm = _.set(prevForm, path, inputValue);
// when we try to update local state
this.setState({ form: updatedForm}) };
Has anyone had any luck with this?
javascript reactjs redux state
asked Nov 24 '18 at 22:23
Mikael .Mikael .
1
add a comment |
0
We get a form from the server that we allow the user to edit and are using lodash _.set(object, path, value) to update parts of that form depending on what part of the form the user updates.
We are trying to get the current value by setting the state inside the component but getting this error;
Uncaught Error: Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops
Our function looks like;
onChange = ({ form }) => {
const { path, editKeyword } = this.props;
const inputValue = form[editKeyword];
let prevForm = this.props.form;
// update the object using
const updatedForm = _.set(prevForm, path, inputValue);
// action
this.props.setCurrentForm(updatedForm); };
We also tried the following with no luck:
onChange = ({ form }) => {
const { path, editKeyword } = this.props;
const inputValue = form[editKeyword];
console.log("input value ", inputValue);
let prevForm = this.props.form;
const updatedForm = _.set(prevForm, path, inputValue);
// when we try to update local state
this.setState({ form: updatedForm}) };
Has anyone had any luck with this?
javascript reactjs redux state
asked Nov 24 '18 at 22:23
Mikael .Mikael .
1
add a comment |
0
0
0
We get a form from the server that we allow the user to edit and are using lodash _.set(object, path, value) to update parts of that form depending on what part of the form the user updates.
We are trying to get the current value by setting the state inside the component but getting this error;
Uncaught Error: Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops
Our function looks like;
onChange = ({ form }) => {
const { path, editKeyword } = this.props;
const inputValue = form[editKeyword];
let prevForm = this.props.form;
// update the object using
const updatedForm = _.set(prevForm, path, inputValue);
// action
this.props.setCurrentForm(updatedForm); };
We also tried the following with no luck:
onChange = ({ form }) => {
const { path, editKeyword } = this.props;
const inputValue = form[editKeyword];
console.log("input value ", inputValue);
let prevForm = this.props.form;
const updatedForm = _.set(prevForm, path, inputValue);
// when we try to update local state
this.setState({ form: updatedForm}) };
Has anyone had any luck with this?
javascript reactjs redux state
asked Nov 24 '18 at 22:23
Mikael .Mikael .
1
We get a form from the server that we allow the user to edit and are using lodash _.set(object, path, value) to update parts of that form depending on what part of the form the user updates.
We are trying to get the current value by setting the state inside the component but getting this error;
Uncaught Error: Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops
Our function looks like;
onChange = ({ form }) => {
const { path, editKeyword } = this.props;
const inputValue = form[editKeyword];
let prevForm = this.props.form;
// update the object using
const updatedForm = _.set(prevForm, path, inputValue);
// action
this.props.setCurrentForm(updatedForm); };
We also tried the following with no luck:
onChange = ({ form }) => {
const { path, editKeyword } = this.props;
const inputValue = form[editKeyword];
console.log("input value ", inputValue);
let prevForm = this.props.form;
const updatedForm = _.set(prevForm, path, inputValue);
// when we try to update local state
this.setState({ form: updatedForm}) };
Has anyone had any luck with this?
javascript reactjs redux state
javascript reactjs redux state
asked Nov 24 '18 at 22:23
Mikael .Mikael .
1
asked Nov 24 '18 at 22:23
Mikael .Mikael .
1
asked Nov 24 '18 at 22:23
Mikael .Mikael .
1
asked Nov 24 '18 at 22:23
Mikael .Mikael .
1
asked Nov 24 '18 at 22:23
Mikael .Mikael .
1
1
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
0
Your onChange function triggers when some form values changing. I don't know what function setCurrentForm does, but if it mutates data which is relevant to the form, we have infinite loop here.
User changed form text value, onChange triggers and runs setCurrentForm function. The last mutate form text value, and onChange function becomes triggered again. I think this is the problem.
answered Nov 24 '18 at 23:43
Max KurtzMax Kurtz
1138
Thank you. Yes,setCurrentFormis trying to set the updated form in state. We tried to use componentWillReceiveProps, but can't get the updated state back as a props. We tried putting our action in onChange function and it changes the state correctly when the user enters a value. But when we finish typing it return back to empty string value as it can't get updated state to the component as a props, and then the onChange function triggers the action once again because value of the input is empty.
– Mikael .
Nov 25 '18 at 2:10
Is there a way around this and to set the updated form in state so we can get it back without causing an infinite loop or the value to be set as empty?
– Mikael .
Nov 25 '18 at 2:11
Of course, try to separate current user input and its handling from state. Let form logic run inside itself and update form only when user submit it. I did the same yesterday: a form for adding an element with several input tags. But they aren't bound with state, they get their initial values as props and when user click submit my function onSave runs dispatch(action) to update the store. Here should be kind of a buffer between user input and state, otherwise loop is inevitable.
– Max Kurtz
Nov 25 '18 at 9:02
and update form only when user submit it. ===== I meant this, sorry: and update STATE only when user submit FORM.
– Max Kurtz
Nov 25 '18 at 12:44
Thanks! apologize for late reply. We are trying to use onChange, instead of submit. We created a code sandbox; codesandbox.io/s/oo3qknl296 Our requirement is that we will receive initial state of formData from the server, and we need to update a specific part of it using the path only (e.g.task[0].titleortask.titlelike it would be in the example). We achieved that functionality and put it in onChange function as you can see in the sandbox. However, If we uncomment where we are trying to set the updated state, we see the errorMaximum update depth exceeded...
– Mikael .
Nov 28 '18 at 22:38
|
show 5 more comments
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%2f53462869%2freact-js-after-updating-form-not-able-to-get-updated-value-componentwillrece%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
0
Your onChange function triggers when some form values changing. I don't know what function setCurrentForm does, but if it mutates data which is relevant to the form, we have infinite loop here.
User changed form text value, onChange triggers and runs setCurrentForm function. The last mutate form text value, and onChange function becomes triggered again. I think this is the problem.
answered Nov 24 '18 at 23:43
Max KurtzMax Kurtz
1138
Thank you. Yes,setCurrentFormis trying to set the updated form in state. We tried to use componentWillReceiveProps, but can't get the updated state back as a props. We tried putting our action in onChange function and it changes the state correctly when the user enters a value. But when we finish typing it return back to empty string value as it can't get updated state to the component as a props, and then the onChange function triggers the action once again because value of the input is empty.
– Mikael .
Nov 25 '18 at 2:10
Is there a way around this and to set the updated form in state so we can get it back without causing an infinite loop or the value to be set as empty?
– Mikael .
Nov 25 '18 at 2:11
Of course, try to separate current user input and its handling from state. Let form logic run inside itself and update form only when user submit it. I did the same yesterday: a form for adding an element with several input tags. But they aren't bound with state, they get their initial values as props and when user click submit my function onSave runs dispatch(action) to update the store. Here should be kind of a buffer between user input and state, otherwise loop is inevitable.
– Max Kurtz
Nov 25 '18 at 9:02
and update form only when user submit it. ===== I meant this, sorry: and update STATE only when user submit FORM.
– Max Kurtz
Nov 25 '18 at 12:44
Thanks! apologize for late reply. We are trying to use onChange, instead of submit. We created a code sandbox; codesandbox.io/s/oo3qknl296 Our requirement is that we will receive initial state of formData from the server, and we need to update a specific part of it using the path only (e.g.task[0].titleortask.titlelike it would be in the example). We achieved that functionality and put it in onChange function as you can see in the sandbox. However, If we uncomment where we are trying to set the updated state, we see the errorMaximum update depth exceeded...
– Mikael .
Nov 28 '18 at 22:38
|
show 5 more comments
0
Your onChange function triggers when some form values changing. I don't know what function setCurrentForm does, but if it mutates data which is relevant to the form, we have infinite loop here.
User changed form text value, onChange triggers and runs setCurrentForm function. The last mutate form text value, and onChange function becomes triggered again. I think this is the problem.
answered Nov 24 '18 at 23:43
Max KurtzMax Kurtz
1138
Thank you. Yes,setCurrentFormis trying to set the updated form in state. We tried to use componentWillReceiveProps, but can't get the updated state back as a props. We tried putting our action in onChange function and it changes the state correctly when the user enters a value. But when we finish typing it return back to empty string value as it can't get updated state to the component as a props, and then the onChange function triggers the action once again because value of the input is empty.
– Mikael .
Nov 25 '18 at 2:10
Is there a way around this and to set the updated form in state so we can get it back without causing an infinite loop or the value to be set as empty?
– Mikael .
Nov 25 '18 at 2:11
Of course, try to separate current user input and its handling from state. Let form logic run inside itself and update form only when user submit it. I did the same yesterday: a form for adding an element with several input tags. But they aren't bound with state, they get their initial values as props and when user click submit my function onSave runs dispatch(action) to update the store. Here should be kind of a buffer between user input and state, otherwise loop is inevitable.
– Max Kurtz
Nov 25 '18 at 9:02
and update form only when user submit it. ===== I meant this, sorry: and update STATE only when user submit FORM.
– Max Kurtz
Nov 25 '18 at 12:44
Thanks! apologize for late reply. We are trying to use onChange, instead of submit. We created a code sandbox; codesandbox.io/s/oo3qknl296 Our requirement is that we will receive initial state of formData from the server, and we need to update a specific part of it using the path only (e.g.task[0].titleortask.titlelike it would be in the example). We achieved that functionality and put it in onChange function as you can see in the sandbox. However, If we uncomment where we are trying to set the updated state, we see the errorMaximum update depth exceeded...
– Mikael .
Nov 28 '18 at 22:38
|
show 5 more comments
0
0
0
Your onChange function triggers when some form values changing. I don't know what function setCurrentForm does, but if it mutates data which is relevant to the form, we have infinite loop here.
User changed form text value, onChange triggers and runs setCurrentForm function. The last mutate form text value, and onChange function becomes triggered again. I think this is the problem.
answered Nov 24 '18 at 23:43
Max KurtzMax Kurtz
1138
Your onChange function triggers when some form values changing. I don't know what function setCurrentForm does, but if it mutates data which is relevant to the form, we have infinite loop here.
User changed form text value, onChange triggers and runs setCurrentForm function. The last mutate form text value, and onChange function becomes triggered again. I think this is the problem.
answered Nov 24 '18 at 23:43
Max KurtzMax Kurtz
1138
answered Nov 24 '18 at 23:43
Max KurtzMax Kurtz
1138
answered Nov 24 '18 at 23:43
Max KurtzMax Kurtz
1138
answered Nov 24 '18 at 23:43
Max KurtzMax Kurtz
1138
1138
Thank you. Yes,setCurrentFormis trying to set the updated form in state. We tried to use componentWillReceiveProps, but can't get the updated state back as a props. We tried putting our action in onChange function and it changes the state correctly when the user enters a value. But when we finish typing it return back to empty string value as it can't get updated state to the component as a props, and then the onChange function triggers the action once again because value of the input is empty.
– Mikael .
Nov 25 '18 at 2:10
Is there a way around this and to set the updated form in state so we can get it back without causing an infinite loop or the value to be set as empty?
– Mikael .
Nov 25 '18 at 2:11
Of course, try to separate current user input and its handling from state. Let form logic run inside itself and update form only when user submit it. I did the same yesterday: a form for adding an element with several input tags. But they aren't bound with state, they get their initial values as props and when user click submit my function onSave runs dispatch(action) to update the store. Here should be kind of a buffer between user input and state, otherwise loop is inevitable.
– Max Kurtz
Nov 25 '18 at 9:02
and update form only when user submit it. ===== I meant this, sorry: and update STATE only when user submit FORM.
– Max Kurtz
Nov 25 '18 at 12:44
Thanks! apologize for late reply. We are trying to use onChange, instead of submit. We created a code sandbox; codesandbox.io/s/oo3qknl296 Our requirement is that we will receive initial state of formData from the server, and we need to update a specific part of it using the path only (e.g.task[0].titleortask.titlelike it would be in the example). We achieved that functionality and put it in onChange function as you can see in the sandbox. However, If we uncomment where we are trying to set the updated state, we see the errorMaximum update depth exceeded...
– Mikael .
Nov 28 '18 at 22:38
|
show 5 more comments
Thank you. Yes,setCurrentFormis trying to set the updated form in state. We tried to use componentWillReceiveProps, but can't get the updated state back as a props. We tried putting our action in onChange function and it changes the state correctly when the user enters a value. But when we finish typing it return back to empty string value as it can't get updated state to the component as a props, and then the onChange function triggers the action once again because value of the input is empty.
– Mikael .
Nov 25 '18 at 2:10
Is there a way around this and to set the updated form in state so we can get it back without causing an infinite loop or the value to be set as empty?
– Mikael .
Nov 25 '18 at 2:11
Of course, try to separate current user input and its handling from state. Let form logic run inside itself and update form only when user submit it. I did the same yesterday: a form for adding an element with several input tags. But they aren't bound with state, they get their initial values as props and when user click submit my function onSave runs dispatch(action) to update the store. Here should be kind of a buffer between user input and state, otherwise loop is inevitable.
– Max Kurtz
Nov 25 '18 at 9:02
and update form only when user submit it. ===== I meant this, sorry: and update STATE only when user submit FORM.
– Max Kurtz
Nov 25 '18 at 12:44
Thanks! apologize for late reply. We are trying to use onChange, instead of submit. We created a code sandbox; codesandbox.io/s/oo3qknl296 Our requirement is that we will receive initial state of formData from the server, and we need to update a specific part of it using the path only (e.g.task[0].titleortask.titlelike it would be in the example). We achieved that functionality and put it in onChange function as you can see in the sandbox. However, If we uncomment where we are trying to set the updated state, we see the errorMaximum update depth exceeded...
– Mikael .
Nov 28 '18 at 22:38
Thank you. Yes,
setCurrentForm is trying to set the updated form in state. We tried to use componentWillReceiveProps, but can't get the updated state back as a props. We tried putting our action in onChange function and it changes the state correctly when the user enters a value. But when we finish typing it return back to empty string value as it can't get updated state to the component as a props, and then the onChange function triggers the action once again because value of the input is empty.– Mikael .
Nov 25 '18 at 2:10
Thank you. Yes,
setCurrentForm is trying to set the updated form in state. We tried to use componentWillReceiveProps, but can't get the updated state back as a props. We tried putting our action in onChange function and it changes the state correctly when the user enters a value. But when we finish typing it return back to empty string value as it can't get updated state to the component as a props, and then the onChange function triggers the action once again because value of the input is empty.– Mikael .
Nov 25 '18 at 2:10
Is there a way around this and to set the updated form in state so we can get it back without causing an infinite loop or the value to be set as empty?
– Mikael .
Nov 25 '18 at 2:11
Is there a way around this and to set the updated form in state so we can get it back without causing an infinite loop or the value to be set as empty?
– Mikael .
Nov 25 '18 at 2:11
Of course, try to separate current user input and its handling from state. Let form logic run inside itself and update form only when user submit it. I did the same yesterday: a form for adding an element with several input tags. But they aren't bound with state, they get their initial values as props and when user click submit my function onSave runs dispatch(action) to update the store. Here should be kind of a buffer between user input and state, otherwise loop is inevitable.
– Max Kurtz
Nov 25 '18 at 9:02
Of course, try to separate current user input and its handling from state. Let form logic run inside itself and update form only when user submit it. I did the same yesterday: a form for adding an element with several input tags. But they aren't bound with state, they get their initial values as props and when user click submit my function onSave runs dispatch(action) to update the store. Here should be kind of a buffer between user input and state, otherwise loop is inevitable.
– Max Kurtz
Nov 25 '18 at 9:02
and update form only when user submit it. ===== I meant this, sorry: and update STATE only when user submit FORM.
– Max Kurtz
Nov 25 '18 at 12:44
and update form only when user submit it. ===== I meant this, sorry: and update STATE only when user submit FORM.
– Max Kurtz
Nov 25 '18 at 12:44
Thanks! apologize for late reply. We are trying to use onChange, instead of submit. We created a code sandbox; codesandbox.io/s/oo3qknl296 Our requirement is that we will receive initial state of formData from the server, and we need to update a specific part of it using the path only (e.g.
task[0].title or task.title like it would be in the example). We achieved that functionality and put it in onChange function as you can see in the sandbox. However, If we uncomment where we are trying to set the updated state, we see the error Maximum update depth exceeded...– Mikael .
Nov 28 '18 at 22:38
Thanks! apologize for late reply. We are trying to use onChange, instead of submit. We created a code sandbox; codesandbox.io/s/oo3qknl296 Our requirement is that we will receive initial state of formData from the server, and we need to update a specific part of it using the path only (e.g.
task[0].title or task.title like it would be in the example). We achieved that functionality and put it in onChange function as you can see in the sandbox. However, If we uncomment where we are trying to set the updated state, we see the error Maximum update depth exceeded...– Mikael .
Nov 28 '18 at 22:38
|
show 5 more comments
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%2f53462869%2freact-js-after-updating-form-not-able-to-get-updated-value-componentwillrece%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
