如何从外部渲染函数推送新的 FieldArray？答案

【问题标题】：How to push new FieldArray from outside render function?如何从外部渲染函数推送新的 FieldArray？
【发布时间】：2017-11-25 06:56:34
【问题描述】：

每次单击按钮时，我都有此代码推送新的FieldArray，但它仅适用于renderContract FieldArray 组件内部。

const renderContact = ({ fields, meta: { error } }) => (
    <div>
    {fields.map((contact, index) => (
      <div key={index}>
        <div className="row form-pad">
          <div className="col-md-3">
            <span>Country Code {index + 1}:<span className="requiredField text-danger"> * </span>: </span>
          </div>
          <div className="col-md-7">
            <Field name={`${contact}.landlineCountryCode`}  component={renderField}type="text"/>
          </div>
        </div>
      </div>
    ))}
    <button className="btn btn-primary"  onClick={() => fields.push({})}>
      Add Contact
    </button>
  </div>
)

并在父表单组件上像这样渲染它：

<FieldArray name="contact" component={renderContact} />

如何在 fieldArray 之外使用fields.push({})？

编辑：

我试过了，但没有用：

<button type="button" onClick={() => props.dispatch(arrayPush('PersonalInfoForm', 'contact', [{}]))}> Add Contact</button>

【问题讨论】：

标签： reactjs redux redux-form

【解决方案1】：

您可以使用form 和fieldname 调度操作arrayPush，以从FieldArray 外部影响fields.push({})

import { arrayPush } from 'redux-form';

// ...
dispatch(arrayPush('myForm', 'contact', {}));

【讨论】：

我已经尝试过<button type="button" onClick={() => props.dispatch(arrayPush('PersonalInfoForm', 'contact', [{}]))}> Add Contact</button>，但没有成功。我错过了什么吗？
arrayPush('PersonalInfoForm', 'contact', {})
我已经弄清楚我的错误是什么。所以你一直都是权利。我命名我的表单与我的组件的名称不同。 let personalInfoForm = reduxForm({ form: 'syncValidation', validate })(PersonalInfoForm)