React不知道Redux-Form状态更改

Question

我们的应用程序有一个管理员页面，可以为我们的客户制作报价。

报价由一个或多个“工作”组成。 例如，如果报价是用于安装冰箱，并进行码头工作，报价将包括以下两个工作：

• 冰箱安装 - $ xx
• 庭院工作 - $ yy

还有与作业相关联的其他元数据，其保证用于创建/编辑单个作业的整个其他形式。

因此，用于创建/编辑单引号的页面包含两种形式：

1. 用于处理报价货币，报价标题，切换作业和删除作业的报价表
2. 作业表格（以模态的形式），用于处理作业的标题，作业的描述以及分解要为该作业完成的工作的项目列表

我有一个顶级容器组件，呈现以下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中的任何现有字段的后续更新不会触发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",

JobModalForm

export default connect(mapStateToProps, mapDispatchToProps)(reduxForm({
  form: 'job',
  enableReinitialize: true
})(JobModal))

QuoteForm

export default connect(null, mapDispatchToProps)(reduxForm({
  form: 'quote'
})(QuoteForm))

Answer 1

我意识到这是Redux-Form中的浅层比较问题 - 而不是我的来源。

这是问题所在。 如您所见，Field Array在不允许用户进行深度比较的情况下进行浅层比较。

回购（ 链接 ）中实际上有一个PR来解决这个问题。