[material-ui]，[redux-from]使用動態選項進行選擇

我從後端請求數據。數據是禮物數據和人物數據。[material-ui]，[redux-from]使用動態選項進行選擇

我的目標是實現連接禮物和人。每個人都需要一份禮物。

我使用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'/>

瀏覽器呈現良好。

我想實現選擇的動態選項。

反正可以實現我的目標就可以了。如果您在閱讀我的描述後不明白這個問題。我會再次編輯這個問題。

來源

2017-04-25 jiexishede

其中是錯誤指向？哪部分代碼？ –

'member.hobbies.map'不能讀取未定義的屬性'map'我不知道如何將數據從'form.props'傳遞到'FieldArray'。 – jiexishede

您會看到，控制檯顯示您未定義hobbies。從調試fields開始。在renderMembers的console.log(fields);後面會出現什麼？

來源

2017-05-03 20:28:11

當應用程序加載member.hobbies可能還沒有定義。嘗試，如果沒有定義聲明一個變量來設置該數組爲空：

const hobbies = member.hobbies || []

然後：

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

來源

2018-01-26 16:45:29

愛好是一種異步數據，對嗎？試試這個解決方案，我認爲它解決了你的問題。 –

[material-ui]，[redux-from]使用動態選項進行選擇

回答

相關問題