如何以編程方式初始化個別的redux表單字段？

Question

已經持續兩天了。在'redux-form'形式中，我需要預先填充來自array.map迭代索引值的訂單字段。這裏是我的形式完整的代碼（請參見注釋）：

const renderField = ({ input, label, type, meta: { touched, error } }) => { 
    let color = 'normal'; 
    if (touched && error) { 
    color = 'danger'; 
    } 

    return (
    <FormGroup color={color}> 
     <Label>{label}</Label> 
     <div> 
     <input {...input} type={type} placeholder={label} /> 
     {touched && (error && <FormFeedback>{error}</FormFeedback>)} 
     </div> 
    </FormGroup> 
); 
}; 

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

const renderQuestion = ({ fields, meta: { error, submitFailed } }) => (
    <ul> 
    <li> 
     <Button type="button" onClick={() => fields.push({})}> 
     Add Question 
     </Button> 
     {submitFailed && error && <span>{error}</span>} 
    </li> 
    {fields.map((question, index) => (
     <li key={index}> 
     <button type="button" title="Remove Question" onClick={() => fields.remove(index)}> 
      x 
     </button> 
     <h4>Question #{index + 1}</h4> 
     <Field // this is the field that needs to be prepopulated 
      name={`${question}.order`} 
      type="text" 
      component={renderField} 
      label="Order" 
     /> 
     <Field name={`${question}.prompt`} type="text" component={renderField} label="Prompt" /> 
     <FieldArray name={`${question}.choices`} component={renderChoices} /> 
     </li> 
    ))} 
    </ul> 
); 

const QuizStepAddForm = props => { 
    const { handleSubmit, pristine, reset, submitting } = props; 
    return (
    <Form onSubmit={handleSubmit}> 
     <Field name="order" type="number" component={renderField} label="Quiz Order" /> 
     <Field name="title" type="text" component={renderField} label="Quiz Title" /> 
     <FieldArray name="questions" component={renderQuestion} /> 
     <div> 
     <Button style={{ margin: '10px' }} color="primary" type="submit" disabled={submitting}> 
      Submit 
     </Button> 
     <Button type="button" disabled={pristine || submitting} onClick={reset}> 
      Clear Values 
     </Button> 
     </div> 
    </Form> 
); 
}; 

export default reduxForm({ 
    form: 'quizStepAddForm', 
})(QuizStepAddForm); 

我曾嘗試使用redux-form Field API meta props，meta:initial初始化場，但只是將其設置在Field標籤不會改變任何東西。我也嘗試以如下方式設置input:defaultValue<Field input={{ defaultValue: '${index + 1}' }}...。這個嘗試雖然改變了包裝輸入組件的初始值，但仍然以某種方式影響字段的狀態，但字段中的任何更改都不會影響表單狀態。

我錯過了什麼？

Answer 1

爲了設置一個終極版形式的內部值的初始狀態，你需要提供initialValues財產成終極版的形式包裝組件：

//... your code above 

export default compose(
    connect(state => ({ 
    // here, you are having an access to the global state object, so you can 
    // provide all necessary data as the initial state of your form 
    initialValues: { 
     someField: "initial value" 
    } 
    })), 
    reduxForm({ 
    form: "quizStepAddForm" 
    }) 
)(QuizStepAddForm);