React不知道Redux-Form状态更改

时间:2017-04-02 21:41:18

标签: forms reactjs redux react-redux redux-form

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

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

  • 冰箱安装 - $ xx
  • Yard Work - $ yy

还有与作业相关联的其他元数据,可以保证创建/编辑单个作业的其他形式。

因此,创建/编辑单引号的页面包含两种形式:

  1. 报价表格,用于处理报价的货币,标题 引用,切换工作和删除工作
  2. 工作表格(以模态的形式),用于处理作业的标题,作业的描述以及分解要为该作业完成的工作的项目列表
  3. 我有一个顶级容器组件,它呈现以下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

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

    QuoteForm

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

1 个答案:

答案 0 :(得分:0)

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

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

在回购(link)中实际上有一个公关解决了这个问题。