Redux 양식 필드 배열 - 특정 길이의 필드 배열 초기화

Question

양식 구성 요소를 3 개의 빈 필드가있는 필드 배열로 시작하고 싶습니다. 누구든지이 방법으로 초기화하는 방법을 설명 할 수 있습니까?

내가 여기 설명서에 제공된 예제 오프거야 : 여기 https://redux-form.com/7.0.4/examples/fieldarrays/

을, 우리는 우리가 더 필드가 없으며, 단지 우리에 의해, 추가 할 해당 버튼을 클릭하면, 원래는 것을 알 수 있습니다 onClick={() => fields.push({})}으로 전화하십시오.

3 개의 입력란으로 시작하여 사용자가 추가 할 수있게하고 싶습니다. ComponentDidMount에서 fields.push를 호출하면 작동하지 않습니다. 특정 길이의 필드 객체를 어떻게 초기화합니까?

FieldArraysForm.js

돌아 오는 양식 팀에

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