Question

这是表格

<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警告：setState（...）：在现有状态期间无法更新状态转换（例如在render或其他组件内构造函数）。渲染方法应该是道具的纯函数州;构造函数的副作用是反模式，但可以移动到componentWillMount。

并且无数次击中导致

未捕获RangeError：超出最大调用堆栈大小

我甚至尝试在click上调用另一个函数，然后通过从该函数传递状态来调用doSave（）。仍然得到同样的错误。请帮忙。

Answer 1

在您的变体中当组件渲染时，您可以在不单击的情况下调用函数。将onClick={this.props.doSave(this.state)}更改为onClick={() => 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)}

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

2 个答案: