[material-ui], [redux-from] 동적 옵션으로 선택

Question

나는 백엔드에서 데이터를 요청합니다. 데이터는 선물 데이터와 사람 데이터입니다.

내 목표는 선물과 사람을 연결하는 것입니다. 각 사람은 선물을 가져 간다.

material-ui 및 redux-form 패키지를 사용합니다.

사람의 데이터 트리 같은 것입니다 :

persons: " 
     [ { 
      name:'person1_name', 
      userID:'person1_userID', 
      hobbies: persondata -> the same to persons 
      }, 
      { 
      name:'person2_name', 
      userID:'person2_userID', 
      hobbies: persondata -> the same to persons 
      }, 
      { 
      name:'person3_name', 
      userID:'person3_userID', 
      hobbies: persondata -> the same to persons 
      } 
      ] 

나는이 결과를 얻으려면 : 나는 select, 3 (백엔드 사람 데이터가 3 인 경우) 사람 item (옵션)를 클릭 보였다된다.

나는 redux 상태 state.sendGood.driftMemberArray.formData을 사용하여 사람 데이터를 저장합니다.

내 코드는 다음과 같습니다 : 결과, 오류 쇼로

import React from 'react' 
import {Field, FieldArray, reduxForm } from 'redux-form' 
import { connect } from 'react-redux' 
import SelectField from 'material-ui/SelectField' 
import MenuItem from 'material-ui/MenuItem' 

const renderSelectField = ({ input, label, meta: { touched, error }, children, ...custom }) => (
    <SelectField 
     floatingLabelText={label} 
     errorText={touched && error} 
     {...input} 
     onChange={(event, index, value) => input.onChange(value)} 
     children={children} 
     {...custom}/> 
) 

const renderMembers = ({ fields, meta: { touched, error, submitFailed } }) => (
    <ul> 
     {fields.map((member, index) => 
      <li key={index}> 
      <Field name={`${member}.selectMan`} component={renderSelectField} label="select a man"> 
       {member.hobbies.map((item,keyIndex) => 
       <MenuItem key={keyIndex} value={keyIndex} primaryText='hahah'/> 
      )} 
      </Field> 
      </li> 
    )} 
    </ul> 
) 


let NextWeekDriftForm = (props) => { 
    const { handleSubmit, pristine, reset, submitting} = props; 
    return (
     <form onSubmit={handleSubmit}> 
     <div> 
      <FieldArray name="members"component={renderMembers}/> 
     </div> 
     </form> 
) 
} 

NextWeekDriftForm = reduxForm({ 
    form: 'NextWeekDriftForm',  // a unique identifier for this form 
    enableReinitialize: true, 
})(NextWeekDriftForm) 

export default NextWeekDriftForm = connect(
    state => ({ 
     initialValues:state.sendGood.driftMemberArray.formData, 
    }) 
) (NextWeekDriftForm) 

:

Uncaught (in promise) TypeError: Cannot read property 'map' of undefined

{member.hobbies.map((item,keyIndex) => <MenuItem key={keyIndex} value={keyIndex} primaryText='hahah'/>

내 문제는이 코드에 아마.

은 내가

<MenuItem value='09090' primaryText='hahah'/> 
    <MenuItem value='09090' primaryText='hahah'/> 
    <MenuItem value='09090' primaryText='hahah'/> 

이 브라우저는 잘 표현하는 코드

{member.hobbies.map((item,keyIndex) => 
        <MenuItem key={keyIndex} value={keyIndex} primaryText='hahah'/> 

를 교체 사용합니다.

선택의 동적 옵션을 실현하고 싶습니다.

어쨌든, 내 목표를 실현할 수 있습니다. 내 설명을 읽은 후에이 문제를 이해하지 못하는 경우. 나는이 문제를 다시 편집 할 것이다.

Answer 1

콘솔에서 볼 수 있듯이 hobbies은 정의되지 않았습니다. fields 디버깅을 시작하십시오. console.log(fields); 이후에 renderMembers에 무엇이 표시됩니까?

Answer 2

app.hobbies를로드 할 때 앱이 아직 정의되지 않았습니다. 정의되지 않은 경우로 널이 배열을 설정하는 변수를 선언하는 것 : 다음

const hobbies = member.hobbies || [] 

과 :

그 오류 점이다

{hobbies.map((item,keyIndex) => 
       <MenuItem key={keyIndex} value={keyIndex} primaryText='hahah'/>