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

Question

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

<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

我也试过在里面放一个 return 但不起作用。

Answer 1

您必须使用 MenuItem 而不是 Field 元素中的 Option 来映射它

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