Question

无法将状态传递给 React 中的动作创建者

2017-06-23

258

reactjs redux state

以下是表单

<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>

以下是我调用动作创建器函数的方式

doSave: (state) => {
   dispatch(savePostAction(state));
},

但这会导致错误

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 .

并且无限次触发导致

Uncaught RangeError: Maximum call stack size exceeded

我甚至尝试在单击时调用另一个函数，然后通过传递该函数的状态来调用 doSave()。仍然出现相同的错误。请帮忙。

Answer 1

在您的变体中，当组件呈现时，您无需单击调用函数。更改 onclick = {this.props.dosave（this.state）} to onclick = {（）=＆gt; this.props.dosave（this.state）}

Answer 2

原因是， onClick 需要一个 function ，您不需要调用该 function ，它将在单击按钮时被调用。

onClick={this.props.doSave(this.state)}

此处 doSave 将在每次渲染时被调用，无需单击。

因此，不要使用：

onClick={this.props.doSave(this.state)}

使用：

onClick={() => this.props.doSave(this.state)}