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來解決這個問題。