如何以Redux形式映射字段选择选项？

问题描述

我试图映射一个数组，这样我就不会在一个特定的选择中编码200个代码。这是我的代码。 const location = [{{id：'A'}，......最多200个id：值]

<FormControl fullWidth={true}>
    <Field name='location'
           component={renderSelectField}
           option={location.map((location,index) => (<option value={location.id}>{location.id}</option>))}
           props={{size: 'small',type: 'text',variant: 'outlined'
           }}
    />
 </FormControl>

const renderSelectField = ({input,label,Meta: {touched,error},children}) => (
    <Select
        floatinglabeltext={label}
        errortext={touched && error ? 1 : 0}
        {...input}
        onChange={(value) => input.onChange(value)}
        children={children}/>
);

 instead of coding these:


    {/*    <option/>*/}
    {/*    <option value='A'>A</option>*/}
    {/*    <option value='B'>B</option>*/}
    ..... up to 200

我也尝试过退货，但不起作用。

解决方法

您必须使用MenuItem而不是Field元素中的Option对其进行映射

{Location.map((location,index) => (
       <MenuItem key={index} value={location.id}>
           {location.id}
       </MenuItem>
))}