[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]使用动态选项进行选择

回答

相关问题