問題描述

到頁(yè)面上展示：報(bào)錯(cuò)：sampleInfoForm.js:205Uncaught TypeError: getFieldDecorator is not a function原因是什么呢？？

PS.我是抄antdesign的Form 動(dòng)態(tài)增減表單項(xiàng)的demo報(bào)錯(cuò)的

代碼：

import React from ’react’import {render} from ’react-dom’let uuid = 0;//注意formClass的名稱和var TalentUserAddForm = Form.create()(formClass);的TalentUserAddForm不能一樣 let formClass = React.createClass({ componentWillMount() { this.props.form.setFieldsValue({ keys: [0], }); }, remove(k) { const { form } = this.props; // can use data-binding to get const keys = form.getFieldValue(’keys’); const nextKeys = keys.filter((key) => { return key !== k; }); // can use data-binding to set form.setFieldsValue({ keys: nextKeys, }); }, add() { uuid++; const { form } = this.props; // can use data-binding to get const keys = form.getFieldValue(’keys’); const nextKeys = keys.concat(uuid); // can use data-binding to set // important! notify form to detect changes form.setFieldsValue({ keys: nextKeys, }); }, render() { const { getFieldDecorator, getFieldValue } = this.props.form; console.log(getFieldDecorator); const formItems = getFieldValue(’keys’).map((k) => { return (<Form.Item {...formItemLayout} label={`good friend${k}：`} key={k}> <Input style={{ width: ’60%’, marginRight: 8 }} /> <Button onClick={() => this.remove(k)}>remove</Button></Form.Item> ); });return ( <p style={{display:'inline'}}><Modal visible={this.props.appointExpertPostFormReduce.get(’addModleVisible’)} onhandleRelease={this.handleSubmit} confirmLoading={this.props.appointExpertPostFormReduce.get(’confirmLoading’)} onCancel={this.props.appointExpertPostFormAction.onCancel} width={900} maskClosable={false} footer={[ <Button style={{backGround:'#000'}} key='btn' type='ghost' size='large' onClick={this.props.appointExpertPostFormAction.onCancel}> 取 消 </Button>, <Button key='submit' type='primary' size='large' onClick={this.handleSubmit}> 確 定 </Button>, ]}> <Form horizontal> {formItems}<Form.Item wrapperCol={{ span: 18, offset: 6 }}> <Button onClick={this.add} style={{ marginRight: 8 }}>add good friend</Button></Form.Item> </Form></Modal> </p> ); }, });var PostForm = Form.create()(formClass);module.exports = PostForm;

問題解答

你可以先試著在你你貼出的代碼的第二行console.log(getFieldDecorator)一下，以確定這是一個(gè)實(shí)際存在的函數(shù)

另外是因?yàn)閟egmentfault貼圖片太簡(jiǎn)單了還怎么的，全都喜歡截圖貼代碼，別人幫你改代碼還要手打一遍嗎？

getFieldDecorator 是 antd@2 引入的，確認(rèn)下你使用的 antd 版本。