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

Question

我有这段代码可以在每次单击按钮时推送新的 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>

Answer 1

您可以使用 form 和 fieldname 调度一个动作 arrayPush 以从 FieldArray

外部实现 fields.push({})

import { arrayPush } from 'redux-form';

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

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

How to push new FieldArray from outside render function?

reactjs

redux

redux-form