反应不知道 Redux-Form 状态变化

Question

我们的应用程序有一个页面供管理员为我们的客户报价。

一个报价由一个或多个 "jobs" 组成。例如。如果报价是关于安装冰箱和整理院子的工作，则报价将包括以下两项工作：

冰箱安装-$xx
庭院作业 - $yy

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

因此创建/编辑单引号的页面由两种形式组成：

处理报价币种的报价单，标题引用、切换职位和删除职位
用于处理职位名称、职位描述和分解该职位待完成工作的项目列表的职位表单（模态形式）

我有一个 top-level 容器组件，它呈现以下 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

但是，这两种形式必须相互通信。

除一件事外一切正常：

当我第一次更新工作时（无论是 pre-existing 使用 initialValues 还是 newly-added），更新有效：如果我更改工作的价格，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

Code snippets

软件包版本：

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

报价单

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

Answer 1

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

Here 是问题所在。如您所见，Field Array 进行浅比较，不允许用户进行深度比较。

repo (link) 中实际上有一个 PR 解决了这个问题。

反应不知道 Redux-Form 状态变化

React not aware of Redux-Form state change

forms

reactjs

redux

redux-form

react-redux

附录

Code snippets

JobModalForm

报价单