Envoyer un tableau à un formulaire Redux pour générer des options dans un menu déroulant de sélection

Question

Travailler sur la partie relative aux questions de sécurité de l'authentification. Le serveur répond avec une liste de la vingtaine de questions sous la forme d'un tableau. Je peux obtenir le formulaire et sélectionner la boîte à rendre, mais seulement une option à la fois en spécifiant l'index.

Si j'essaie d'envoyer l'ensemble du tableau, j'obtiens une erreur undefined. J'ai essayé de faire un for loop dans le `pour parcourir chaque index, ce qui a généré une erreur.

J'essaie de comprendre comment passer le tableau entier afin qu'il crée un option pour chaque entrée dans le tableau.

C'est ce que j'ai jusqu'à présent:

// ./set_security_questions.js 

// This renders errors regarding the form inputs 
renderField(field) { 
    const { 
     label, 
     placeholder, 
     type, 
     name, 
     questions, 
     meta: { 
      touched, 
      error 
     } 
    } = field; 

    return (
     <div className='form-group'> 
      <label>{label}</label> 
      <select className='form-control' name={name}> 
       <option value={questions}>{questions} 
       </option>} 
      </select> 
      <input 
       className='form-control' 
       type={type} 
       placeholder={placeholder} 
       {...field.input} 
      /> 
      <div className='text-danger'> 
       {touched ? error : ""} 
      </div> 
     </div> 
    ); 
} 


// The main body to be rendered 
render() { 
    if (this.props.permitRender) { 
     const { handleSubmit } = this.props; 
     return (
      <div> 

       <h3>Set Security Questions</h3> 
       <p>Please select two security questions that will be easy for you to remember.</p> 

       <form onSubmit={handleSubmit(this.onSubmit.bind(this))}> 
        {this.renderAlert()} 

        <Field 
         questions={this.props.questions.data.security_question} 
         label='Question 1' 
         placeholder='Answer 1' 
         name='a1' 
         type='text' 
         component={this.renderField} 
        /> 

        <Field 
         label='Question 2' 
         placeholder='Answer 2' 
         name='a2' 
         type='text' 
         component={this.renderField} 
        /> 
        <button type="submit" className="btn btn-primary">Submit</button> 
       </form> 
      </div> 
     );    
    } else if (!this.props.permitRender) { 
     return ( 
      <div> { this.renderAlert() } </div> 
     ); 
    } 
} 

En outre, mon JSON qui revient du serveur semble assez étrange, donc je vais devoir fer, mais encore se demander comment passer un tableau dans le formulaire. this.props.questions.data:

data: 
    id: 123 
    key: "key_request" 
    security_q1: null 
    security_q2: null 
    security_question: Array(29) 
     0: {security_question: "In what city or town did you meet your spouse/partner?"} 
     1: {security_question: "In what city or town did your mother and father meet?"} 
     2: {security_question: "In what town or city was your first full time job?"} 
     3: {security_question: "What is the first name of your spouse's father?"} 
     ...... 

Answer 1

Voici un exemple que je utilise actuellement pour remplir une série de cases à cocher. Il n'y a pas de logique particulière dans le composant case à cocher, j'utilise juste le HTML personnalisé pour le stylisme.

Voici mes données, un tableau simple:

const env = { 
    FONT_FORMATS: ['OTF', 'TTF', 'WOFF', 'WOFF2'] 
} 

Voici le code dans la fonction render() pour mon composant. Je stocke chaque élément dans le formulaire Redux sous la clé de l'objet -> fileTypes.

<ul className='tags'> 
    {envConfig.FONT_FORMATS.map((tag: string) => (
     <Field 
     key={tag} 
     value={tag} 
     name={`fileTypes.[${tag}]`} 
     id={tag.toLowerCase().replace(' ', '_')} 
     type='checkbox' 
     component={checkBox} 
     label={tag} 
     /> 
    ))} 
    </ul> 

J'espère que cela vous aide!