我们的应用程序有一个管理员页面,可以为我们的客户制作报价。
报价由一个或多个“工作”组成。例如。如果报价是用于安装冰箱,并进行码头工作,报价将包括以下两个工作:
还有与作业相关联的其他元数据,可以保证创建/编辑单个作业的其他形式。
因此,创建/编辑单引号的页面包含两种形式:
我有一个顶级容器组件,它呈现以下2个Redux-Form组件:
{/* IN CONTAINER COMPONENT */}
<JobModalForm
onSubmit={this.saveJob}
/>
<QuoteForm
initialValues={quote}
onSubmit={this.updateQuote}
updateQuote={this.updateQuote}
deleteQuote={this.deleteQuote}
publicQuoteUrl={this.props.publicQuoteUrl}
linkCopied={() => { this.props.snackbarString('link copied!') }}
/>
这两种形式都存储在表单状态的单独部分中:
--form |
| -- quote
|
| -- job
但是,这两种形式必须相互沟通。
一切正常,除了一件事:
当我第一次更新作业(无论是使用initialValues
预先存在还是新添加)时,更新有效:如果我更改作业的价格,QuoteForm
将呈现新的价格。这是通过reduxForm的arraySplice
// in container component ...
// onSubmit handler for JobModalForm
saveJob = (job, dispatch, props) => {
// if this is an existing job (whether or not it has been created in the db or not)
// update it
// else
// append the job to the existing quote
if (job._id || job.fresh) {
const action = arraySplice('quote', 'jobs', job.index, 1, job)
dispatch(action)
} else {
dispatch(arrayPush('quote', 'jobs', job ))
}
dispatch({ type: JobModalActions.TOGGLE_MODAL })
}
但是,对QuoteForm的ArrayField中 ANY 现有字段的后续更新不会从React触发render
。例如。在我的初始更新后更改任何工作的价格不会被React注意到。
Redux-Form成功调度操作,而商店的form
键确实包含更新的字段。
奇怪的是,创建任意数量的工作确实有效(通过arrayPush
,如上所示)。
我完全难过,需要一些帮助来弄清楚为什么JobModalForm
的表单提交仅适用于新工作。
以下是复制问题的示例: https://www.webpackbin.com/bins/-KgoQMIyvxdJb7Pvh0eu
包的版本:
"react-redux": "^4.4.1",
"redux": "^3.3.1",
"redux-form": "^6.5.0",
"redux-form-material-ui": "^4.1.2",
export default connect(mapStateToProps, mapDispatchToProps)(reduxForm({
form: 'job',
enableReinitialize: true
})(JobModal))
export default connect(null, mapDispatchToProps)(reduxForm({
form: 'quote'
})(QuoteForm))