Reduxフォームフィールド配列 - 特定の長さのフィールド配列を初期化する

Question

フォームコンポーネントを3つの空のフィールドを持つフィールド配列から始めたいと思います。誰もこの方法でそれを初期化する方法を説明することはできますか？

私はここにマニュアルに記載されている例オフつもりです：ここでhttps://redux-form.com/7.0.4/examples/fieldarrays/

を、我々はによって、もともと、私たちは何のフィールドを持っていない、と私たちは、関連するボタンをクリックした場合にのみ、我々はそれらを追加しないことがわかりますonClick={() => fields.push({})}と呼んでください。

私は3つのフィールドから始めて、さらにユーザーが追加できるようにしたいと考えています。 ComponentDidMountでfields.pushを呼び出すことはできません。どのように特定の長さのフィールドオブジェクトを初期化するのですか？

FieldArraysForm.js Reduxのフォームチームに

import React from 'react' 
import { Field, FieldArray, reduxForm } from 'redux-form' 
import validate from './validate' 

const renderField = ({ input, label, type, meta: { touched, error } }) => 
    <div> 
    <label> 
     {label} 
    </label> 
    <div> 
     <input {...input} type={type} placeholder={label} /> 
     {touched && 
     error && 
     <span> 
      {error} 
     </span>} 
    </div> 
    </div> 

const renderHobbies = ({ fields, meta: { error } }) => 
    <ul> 
    <li> 
     <button type="button" onClick={() => fields.push()}> 
     Add Hobby 
     </button> 
    </li> 
    {fields.map((hobby, index) => 
     <li key={index}> 
     <button 
      type="button" 
      title="Remove Hobby" 
      onClick={() => fields.remove(index)} 
     /> 
     <Field 
      name={hobby} 
      type="text" 
      component={renderField} 
      label={`Hobby #${index + 1}`} 
     /> 
     </li> 
    )} 
    {error && 
     <li className="error"> 
     {error} 
     </li>} 
    </ul> 

const renderMembers = ({ fields, meta: { error, submitFailed } }) => 
    <ul> 
    <li> 
     <button type="button" onClick={() => fields.push({})}> 
     Add Member 
     </button> 
     {submitFailed && 
     error && 
     <span> 
      {error} 
     </span>} 
    </li> 
    {fields.map((member, index) => 
     <li key={index}> 
     <button 
      type="button" 
      title="Remove Member" 
      onClick={() => fields.remove(index)} 
     /> 
     <h4> 
      Member #{index + 1} 
     </h4> 
     <Field 
      name={`${member}.firstName`} 
      type="text" 
      component={renderField} 
      label="First Name" 
     /> 
     <Field 
      name={`${member}.lastName`} 
      type="text" 
      component={renderField} 
      label="Last Name" 
     /> 
     <FieldArray name={`${member}.hobbies`} component={renderHobbies} /> 
     </li> 
    )} 
    </ul> 

const FieldArraysForm = props => { 
    const { handleSubmit, pristine, reset, submitting } = props 
    return (
    <form onSubmit={handleSubmit}> 
     <Field 
     name="clubName" 
     type="text" 
     component={renderField} 
     label="Club Name" 
     /> 
     <FieldArray name="members" component={renderMembers} /> 
     <div> 
     <button type="submit" disabled={submitting}> 
      Submit 
     </button> 
     <button type="button" disabled={pristine || submitting} onClick={reset}> 
      Clear Values 
     </button> 
     </div> 
    </form> 
) 
} 

export default reduxForm({ 
    form: 'fieldArrays', // a unique identifier for this form 
    validate 
})(FieldArraysForm) 

Answer 1

ありがとう： https://github.com/erikras/redux-form/issues/3640

基本的には、それが行われます方法は、あなたが接続して輸出する場合、フォームに初期値の配列で渡すことですそれは次のようなものです：

export default reduxForm({ 
    form: "foo", 
    initialValues: { 
    rockSingers: ['Axl Rose', 'Brian Johnson'] 
    }, 
    onSubmit: values => { 
    window.alert("Submited: \n" + JSON.stringify(values, null, 2)); 
    } 
})(MyForm);