[材料-UI]，[redux-from]选择动态选项

Question

i从后端请求数据。数据是礼品数据和人数据。

我的目标是意识到将礼物和人联系起来。每个人都拿礼物。

我使用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)

结果，错误显示：

未定义的(在承诺中(typeError：无法阅读未定义的属性'地图

{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

应用程序加载成员时。尝试声明一个变量以将此数组设置为null如果未定义：

const hobbies = member.hobbies || []

，然后：

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

Answer 2

您看到的，控制台向您显示hobbies不确定。从调试fields开始。在renderMembers中，您会在console.log(fields);之后看到什么？

Answer 3

希望下面的摘要会为您提供帮助，

{this.props.data.map((e, keyIndex) => {
return (<MenuItem key={keyIndex} value={e.warehouseId}>{e.name}</MenuItem>);

}(}