[material-ui], [redux-from] Wählen Sie mit dynamischen Optionen

Question

Ich Anfrage Daten aus dem Backend. Die Daten sind die Geschenkdaten und die Personendaten.

Mein Ziel ist es, das Geschenk und die Person zu erkennen, verbinden. Jede Person nimmt ein Geschenk.

Ich benutze die material-ui und das redux-form Paket.

Die Person Datenbaum ist wie:

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

Ich möchte dieses Ergebnis erhalten: ich auf die select, 3 (wenn die Back-End-Person-Daten 3 Personen) Person item (Option) zeigte sich.

Ich benutze den redux Zustand state.sendGood.driftMemberArray.formData Personendaten zu speichern.

Mein Code ist unten:

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) 

Als Ergebnis der Fehler zeigen:

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

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

Mein Problem ist wahrscheinlich in diesem Code.

verwende ich die

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

den Code ersetzen

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

Der Browser gut macht.

Ich mag dynamische Optionen der Auswahl realisieren.

Wie auch immer, kann mein Ziel erreichen, ist in Ordnung. Wenn Sie dieses Problem nicht verstehen, nachdem Sie meine Beschreibung gelesen haben. Ich werde dieses Problem erneut bearbeiten.

Answer 1

Sie sehen, die Konsole zeigt Ihnen, dass hobbies nicht definiert ist. Beginnen Sie mit dem Debuggen der fields. Was werden Sie nach console.log(fields); in renderMembers sehen?

Answer 2

Wenn die App problably die member.hobbies laden noch nicht definiert ist. Versuchen Sie, eine Variable zu deklarieren dieses Array als null gesetzt, wenn nicht definiert ist:

const hobbies = member.hobbies || [] 

und dann:

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