[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（オプション）をクリックしてください示したています。

私は還元状態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'/> 

ブラウザを置き換える使用

がうまくレンダリングします。

私は選択の動的オプションを実現したいと思います。

とにかく、私の目標を実現することはOKです。 私の説明を読んだ後にこの問題が理解できない場合。この問題をもう一度編集します。

Answer 1

コンソールには、hobbiesが定義されていないことが表示されます。 fieldsのデバッグを開始してください。 console.log(fields);の後に、renderMembersに何が表示されますか？

Answer 2

app.hobbiesのアプリロードがまだ定義されていない場合。定義されていない場合はnullとしてこの配列を設定するための変数を宣言するために試してみてください。そして、

const hobbies = member.hobbies || [] 

とを：

そのエラー箇所である

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