選択ドロップダウンでオプションを生成するために、Reduxフォームにアレイを送信してください

Question

設定のセキュリティに関する質問の一部を認証に取り組んでください。サーバーは20個程度の質問のリストを配列形式で返します。レンダリングするフォームと選択ボックスを取得できますが、インデックスを指定することで一度に1つのオプションしか表示されません。

アレイ全体を送信しようとすると、undefinedエラーが発生します。 `各インデックスを反復するために`の中でfor loopを実行しようとしたところ、エラーが発生しました。

配列全体を渡す方法を理解しようとしているので、配列の各エントリに対してoptionが作成されます。

また

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

は、サーバから戻ってきた私のJSONはかなり奇妙に見えるので、私はそれを鉄にする必要がありますが、それでも合格するか疑問：

この

は、私がこれまで持っているものですFormに配列します。 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

ここでは、現在、一連のチェックボックスを設定する例を示します。チェックボックスコンポーネントには特別なロジックはありません。スタイリングの目的でカスタムhtmlを使用しています。ここ

は私のデータであり、単純な配列：

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

ここに私のコンポーネントのレンダリング（）関数内のコードです。 Reduxフォームの各項目をオブジェクトキー - > 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> 

私はこれがあなたを助けてくれることを願っています！