andesign 的form提交 为什么用validateFields 回出现报错

新手上路,请多包涵

报错内容:
ypeError: Cannot read property 'push' of undefined

at createBaseForm.js:359
at Array.forEach (<anonymous>)
at createBaseForm.js:353
at complete (index.js:89)
at index.js:225
at next (util.js:148)
at count (util.js:93)
at cb (index.js:173)
at Object.required [as validator] (required.js:8)
at index.js:216

版本:
"antd": "^2.12.4",
"react": "^15.6.1",
"react-dom": "^15.6.1",
——————————————————————————————————————————
代码:
import { Form, Row, Col, Input, Button, Icon } from 'antd';
import React, {Component} from 'react';

const FormItem = Form.Item;

class AdvancedSearchForm extends Component {

state = {
    expand: false,
};

handleSearch = (e) => {
    e.preventDefault();
    console.log("提交了。。。",this.props.form.getFieldsValue());
    try{
    this.props.form.validateFields((err, values) => {
        if (!err) {
            console.log('Received values of form: ', values);
        }

    });
    }catch(ex){
        console.log(ex)
    }

}

handleReset = () => {
    this.props.form.resetFields();
}

toggle = () => {
    const { expand } = this.state;
    this.setState({ expand: !expand });
}

getFields() {
    const count = this.state.expand ? 10 : 6;
    const { getFieldDecorator } = this.props.form;
    const children = [];
    for (let i = 0; i < 10; i++) {
        children.push(
            <Col span={8} key={i} style={{ display: i < count ? 'block' : 'none' }}>
                <FormItem label={`name${i}`}>
                    {getFieldDecorator(`name${i}`, {
                        rules: [{
                            required: true,
                            message: '该字段为必填字段',
                        }],
                    })(
                        <Input placeholder="请输入..." />
                    )}
                </FormItem>
            </Col>
        );
    }
    return children;
}

render() {
    return (
        <Form onSubmit={this.handleSearch}>
            <Row gutter={24}>{this.getFields()}</Row>
            <Row>
                <Col span={24} style={{ textAlign: 'right' }}>
                    <Button type="primary" htmlType="submit">提交</Button>
                    <Button style={{ marginLeft: 8 }} onClick={this.handleReset}>
                        重置
                    </Button>
                    <a style={{ marginLeft: 8, fontSize: 12 }} onClick={this.toggle}>
                        {this.state.expand ? '更多' : '隐藏'} <Icon type={this.state.expand ? 'up' : 'down'} />
                    </a>
                </Col>
            </Row>
        </Form>
    );
}

}

const WrappedAdvancedSearchForm = Form.create()(AdvancedSearchForm);

export default WrappedAdvancedSearchForm;


主键引用:
<WrappedAdvancedSearchForm/>

阅读 5.8k
4 个回答
新手上路,请多包涵

如果项目中引用了插件:lodash-webpack-plugin
去掉该插件及其应用试试

新手上路,请多包涵

个人猜测版本问题... 有大神提供思路吗? 除了提升antd版本

getFields()方法中的const children = [];修改为:
let children = [];

新手上路,请多包涵

我也遇到这个问题,请问找到解决方案了吗

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题