Comment initialiser par programme un champ de formulaire redux individuel?

Question

Luttant avec cela pendant deux jours déjà. Dans un formulaire 'redux-form', j'ai besoin de préremplir un champ de commande avec une valeur provenant de l'index d'itération array.map. Voici un code complet pour mon formulaire (s'il vous plaît voir les commentaires):

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

J'ai essayé d'utiliser redux-form Field API meta props, meta:initial pour initialiser le champ, mais en mettant simplement dans la balise Field ne change rien. J'ai également essayé de définir input:defaultValue de la manière suivante <Field input={{ defaultValue: '${index + 1}' }}.... Cette tentative, bien que modifiant la valeur initiale du composant d'entrée enveloppé mais qui, d'une manière ou d'une autre, affecte l'état du champ, tout changement dans le champ n'a aucun effet sur l'état du formulaire.

Qu'est-ce qui me manque?

Answer 1

Afin de définir l'état initial des valeurs à l'intérieur d'une forme Redux, vous devez fournir initialValues propriété sous forme redux composant emballé:

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