Reputation: 1457
Here is the form
<PostBody>
<Input value={this.state.title} onChange={(value) => this.onChangeTitle(value)} ref="titleInput" type="text" id="title" name="title" placeholder="Post Title" />
<TextArea value={this.state.body} onChange={(value) => this.onChangeBody(value)} ref="bodyInput" id="body" name="body" placeholder="Post Content" />
<ToolBar>
<Button disabled={!this.props.ptitle || !this.props.pbody} onClick={this.props.doSave(this.state)}>Save</Button>
<BackLink to="/posts">Cancel</BackLink>
<div style={{float:'left', marginTop:'10px'}}>
{backBtn}
</div>
</ToolBar>
</PostBody>
Here is how I call the action creator function
doSave: (state) => {
dispatch(savePostAction(state));
},
But this results in the error
warning.js:36 Warning: setState(...): Cannot update during an existing state transition (such as within
render
or another component's constructor). Render methods should be a pure function of props and state; constructor side-effects are an anti-pattern, but can be moved tocomponentWillMount
.
and is hitting infinite times resulting in
Uncaught RangeError: Maximum call stack size exceeded
I even tried calling another function on click and then calling the doSave() by passing the state from that function. Still getting the same error. Please help.
Upvotes: 1
Views: 259
Reputation: 104369
Reason is, onClick
expect a function
, you don't need to call that function
, it will get called on click of button.
onClick={this.props.doSave(this.state)}
Here doSave
will get called on each rendering without click.
So instead of:
onClick={this.props.doSave(this.state)}
Use:
onClick={() => this.props.doSave(this.state)}
Upvotes: 1
Reputation: 7764
In Your variant You call function without click, when component is rendering.
Change onClick={this.props.doSave(this.state)}
to onClick={() => this.props.doSave(this.state)}
Upvotes: 4