Redux-forms 从 ComponentWillReceiveProps 调用替代提交答案

【问题标题】：Redux-forms Call alternate submit from ComponentWillRecievePropsRedux-forms 从 ComponentWillReceiveProps 调用替代提交
【发布时间】：2017-05-26 17:00:48
【问题描述】：

redux-forms 版本： 6.6.3

反应版本： 15.5.0

我想从我的 react 组件中的 componentWillRecieveProps 函数中调用不同的提交函数。

componentWillReceiveProps(nextProps) {

 if (nextProps.updateTierConfigState == "ValidationFulfilled" 
            && nextProps.updateMyConfigValidationClean) {
  console.log('CWRP calling submit()')
  //this.props.submit(); //THIS CALLS DEFAULT on FORM's onSubmit
  this.props.handleSubmit(this.updateSubmit().bind(this))

 }    
 else {
  this.props.handleSubmit(this.createSubmit().bind(this))
 }
}

updateSubmit(values) { 
  //do stuff
}

createSubmit(values) { 
  //do stuff
}

我见过这样的例子：https://github.com/erikras/redux-form/issues/711#issuecomment-191850962

但是，我无法成功调用handleSubmit。它不会调用传入的函数。

我已经调试到handleSubmit，它返回非常快，没有调用指定的提交函数。

【问题讨论】：

需要查看this.props.handleSubmit函数来调试这个。
没有直接关系，但我认为您在 if 语句中的嵌套已关闭。在 if 块后面有两个结束大括号，在 componentWillReceiveProps 之外还有一个 else 块。
@Jose，缺少的 } 仅存在于上面的帖子中，而不存在于我的实际代码中。会更正，仍然。
@ChaseDeAnda，handleSubmit 由 redux-form 库实现。
查看redux-form.com/6.0.0-alpha.4/examples/submitValidation。 “将它作为 onSubmit 道具传递给您的装饰组件。在这种情况下，您将在您的装饰组件中使用 onSubmit={this.props.handleSubmit} 以在单击提交按钮时触发它。将其作为参数传递给装饰组件内部的 this.props.handleSubmit 函数。在这种情况下，您将在装饰组件内部使用 onClick={this.props.handleSubmit(mySubmit)} 以在单击提交按钮时触发它。"

标签： javascript reactjs redux-form

【解决方案1】：

当你传入这些函数时，你会立即调用它们。当你引用提交函数时，你不需要在函数名之后包含()。 this.updateSubmit().bind(this) 应该是 this.updateSubmit。这里也不需要绑定。

更改：this.props.handleSubmit(this.updateSubmit().bind(this))

收件人：this.props.handleSubmit(this.updateSubmit)

【讨论】：

谢谢，我在updateSubmit后面放了()的错误。但是，修复后，handleSubmit 仍然没有调用函数 updateSubmit。

【解决方案2】：

我发现我需要做两件事。

使用此行调用自定义提交方法：this.props.handleSubmit((values)=> this.submitUpdate(values))() 注意末尾添加的“()”。
将此行（和周围的 if 条件）移动到 componentDidUpdate() 方法。我在 submit 方法中使用 props 来决定组件的验证状态，并且 mapStateToProps 中的 props 在 componentWillReceiveProps 或 componentWillUpdate 之前未分配给 this.props。

这是我新的自动提交调用：

componentDidUpdate() {

 //moved this here so that this.props is updated from nextState
 if (this.props.updateMyConfigState == "ValidationFulfilled" 
            && this.props.updateMyConfigValidationClean) {

        this.props.handleSubmit((values) => this.submitUpdate(values))();            

 }
}

我知道这超出了 redux-form 验证建议的范围，并且我认识到这可能不是处理验证的最佳方式。我目前的推理是：

它允许我有多个提交验证操作（用于创建和更新用户操作的单独操作），其中每个操作都有自己的错误和警告行为。特别是，错误：不允许操作和警告：允许但需要额外的用户批准。
在 gui 元素之外的单独列表中直观地显示错误/警告。

【讨论】：