AeJey
AeJey

Reputation: 1457

Cannot pass state to action creator in React

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 to componentWillMount.

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

Answers (2)

Mayank Shukla
Mayank Shukla

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

Andrii Starusiev
Andrii Starusiev

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

Related Questions