선택 드롭 다운 메뉴에서 옵션을 생성하기 위해 Redux Form에 배열을 보냅니다.

Question

인증 보안 질문 설정 작업 중. 서버는 20 개 정도의 질문 목록을 배열 형식으로 응답합니다. 렌더링 할 폼 및 선택 상자를 가져올 수 있지만 인덱스를 지정하여 한 번에 하나의 옵션 만 표시 할 수 있습니다.

전체 배열을 보내려고하면 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 꽤 이상한 보이는, 그래서 그 밖으로 다림질해야하지만 여전히를 전달하는 방법을 궁금해 :

이

내가 지금까지 무엇을 가지고 양식에 배열. 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'] 
} 

내 구성 요소에 대한 렌더링() 함수의 코드이다 : 여기

내 데이터, 간단한 배열이다. 오브젝트 키 -> fileTypes 아래 Redux 양식에 각 항목을 저장합니다.

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

이 정보가 도움이 되었기를 바랍니다.