React.createElement: type is invalid

Question

我是新接触react不久，想用antd+react自己做一个demo，之前有写过这样类似的结构，但是不知道为什么这次就报这样的错，自己排了快一个小时了，也不知道什么原因，求助求助

import React, {Component, Proptypes} from 'react';
import ReactDom from 'react-dom';
import {Row, Col, Form, Select} from 'antd';

let FormItem = Form.item;

let AccountSelectInfo = class AccountSelectInfo extends Component {
    constructor(props) {
        super(props);
    }

    render () {
        let formItemLayout = {
            labelCol: {span: 4},
            wrapperCol: {span: 18},
        }
        let {getFieldValue, getFieldDecorator} =this.props.form;
        let selectInfo = [
            {label: '系统', name: 'os', values: [
                {value: 'android', key: 'Android'},
                {value: 'ios', key: 'iOS'},
                {value: 'pc', key: 'PC'},
            ]},
        ];
        let handleSelect = function (selectorInfo) {
            let addSelect = [];
            selectInfo.map(
                (val, index) => {
                    addSelect.push((
                        <Col span = {6} key = {index} >
                            <FormItem label = {val.label} {...formItemLayout}>
                                {getFieldDecorator (val.name, {
                                    initialValue: val.values[0].key,
                                })(
                                        <Select name = {val.name} key = {val.name}>
                                            {val.values.map(v => {(<Option key = {v.key} value = {v.key}>{v.value}</Option>)})}
                                        </Select>
                                )}
                            </FormItem>
                        </Col>
                    ));
                }
            );
            console.log('-----> addSelect', addSelect);
            return addSelect;
        }
        return (
            {handleSelect(selectInfo)}
        );
    }
};

AccountSelectInfo.proptypes = {

};
AccountSelectInfo = Form.create()(AccountSelectInfo);

export default AccountSelectInfo;

上面这个是组件部分

 <div className = 'main-content' style = {{padding: '1rem'}}>
    <AccountSelectInfo / >
</div>

这个是报错
3warning.js?0260:33 Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in. Check the render method of AccountSelectInfo.

Answer 1

错误的地方应该是FormItem组件，应该是let FormItem = Form.Item; Item是大写的；Form.item的值为undefined

Answer 2

return (
          <Form>
            {handleSelect(selectInfo)}
          </Form>
        )
        

Answer 3

这个问题解决了吗

Answer 4

碰到了同样的问题，我是因为如下错误引起的，在此记录一下。

import { A } from 'antd';
const { B } = A; // 实际上A里没有B模块

出现这个问题绝大部分是因为import或者export错了，可以仔细检查一下。