美文网首页
Error: Must call `getFieldProps`

Error: Must call `getFieldProps`

作者: 楠楠_c811 | 来源:发表于2019-07-31 17:24 被阅读0次

动态渲染antd的form组件时报错.百思不得其解,追根究底之后,发现是因为表单的字段和设置的不完全统一,所以需要统一一下。
原代码:

//数据
const formList = theme => [
    { title: theme.language.gender, key: 'sex',list: [1, 0]  },
    {
        title: theme.language.nationality,
        key: 'nationality',
        list: ['中国', '英国', '美国', '日本', '加拿大', '澳大利亚'],
    },
    { title: theme.language.generation, key: 'age', list: ['18~28', '28~38', '38~48', '48~58', '其他'] },
    { title: theme.language.educationLevel, key: 'education', list: ['大学专科', '大学本科', '研究生及以上', '其他'] },
    {
        title: theme.language.monthlyIncomeLevel,
        key: 'income',
        list: ['10000以下', '10000~30000', '30000~50000', '50000~80000', '其他'],
    },
]
class Demo extends React.Component {
render(){
    return(
      <Form>
        {formList(theme).map((itema, index) => {
           return (
           <div className={`cotent`} key={index}>
            <p className={`title`}>{itema.title}</p>
             <Form.Item>
                 {getFieldDecorator(itema.name, {
                     initialValue: '请选择',
                        rules: [{ required: true, message: 'Please input your Auth code ! ' }],
                   })(
                        <Select
                            className={`name-input`}
                            placeholder="Please select a country"
                            suffixIcon={<Icon type="caret-down" />}
                            onChange={handleChange}>
                            {itema.list.map((item, index1) => {
                             return (
                                 <Option key={index1} value={item}>
                                       {item === 0 ? '男' : item === 1 ? '女' : item}
                                         </Option>
                                )
                              })}
                        </Select>
                   )}
             </Form.Item>
        </div>
         )
     })}
</Form>
)
}}

修改后新代码:

{formList(theme).map((itema, index) => {
                        return (
                            <div className={`cotent`} key={index}>
                                <p className={`title`}>{itema.title}</p>
                                <Form.Item>
                                {getFieldDecorator(itema.name, {
                                    initialValue: '请选择',
                                  })(
                                        <Select
                                            className={`name-input`}
                                            placeholder="Please select a country"
                                            suffixIcon={<Icon type="caret-down" />}
                                            onChange={handleChange}>
                                            {itema.list.map((item, index1) => {
                                            return (
                                                <Option key={index1} value={item}>
                                                      {item === 0 ? '男' : item === 1 ? '女' : item}
                                                        </Option>
                                                )
                                              })}
                                        </Select>
                                  )}
                                </Form.Item>
                            </div>
                        )
                    })}

相关文章

网友评论

      本文标题:Error: Must call `getFieldProps`

      本文链接:https://www.haomeiwen.com/subject/poierctx.html