如何以编程方式初始化个别的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);