未捕获的组件:无法读取未定义的属性“”TypeError“”
未捕获的组件:无法读取未定义的属性“”TypeError“”
提问于 2018-07-19 14:18:51
我正在使用ant design UI的Registration Form。我刚刚复制并粘贴了它，但在Chrome的控制台中，我遇到了这个奇怪的错误，因为我还没有修改antd.min.js
antd.min.js:23 Uncaught TypeError: Cannot read property 'Component' of undefined
at Object.<anonymous> (antd.min.js:23)
at t (antd.min.js:7)
at Object.<anonymous> (antd.min.js:31)
at t (antd.min.js:7)
at Object.<anonymous> (antd.min.js:50)
at t (antd.min.js:7)
at Object.<anonymous> (antd.min.js:7)
at t (antd.min.js:7)
at antd.min.js:7
at antd.min.js:7
(anonymous) @ antd.min.js:23
t @ antd.min.js:7
(anonymous) @ antd.min.js:31
t @ antd.min.js:7
(anonymous) @ antd.min.js:50
t @ antd.min.js:7
(anonymous) @ antd.min.js:7
t @ antd.min.js:7
(anonymous) @ antd.min.js:7
(anonymous) @ antd.min.js:7
(anonymous) @ antd.min.js:7
(anonymous) @ antd.min.js:7index.html看起来像这样：
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>React Project</title>
<link href="/assets/stylesheet/antd.min.css" rel="stylesheet" type="text/css">
<link href="/assets/stylesheet/stylesheet.css" rel="stylesheet" type="text/css">
<script src="/assets/antd.min.js"></script>
</head>
<body>
<div id="main">
<div id="registration"></div>
</div>
<script src="/build/bundle.js"></script>
</body>
</html>registration.js看起来像这样：
import React, {Component} from 'react';
import ReactDOM from 'react-dom';
import {
Form,
Input,
Tooltip,
Icon,
Cascader,
Select,
Row,
Col,
Checkbox,
Button,
AutoComplete
} from 'antd';
const FormItem = Form.Item;
const Option = Select.Option;
const AutoCompleteOption = AutoComplete.Option;
export default class RegistrationForm extends Component {
constructor(props) {
super(props);
this.state = {
confirmDirty: false,
autoCompleteResult: []
};
}
handleSubmit(e) {
console.log('i\'m here');
e.preventDefault();
this.props.form.validateFieldsAndScroll((err, values) => {
if (!err) {
console.log('Received values of form: ', values);
}
});
}
handleConfirmBlur(e) {
const value = e.target.value;
this.setState({
confirmDirty: this.state.confirmDirty || !!value
});
}
compareToFirstPassword(rule, value, callback) {
const form = this.props.form;
if (value && value !== form.getFieldValue('password')) {
callback('Two passwords that you enter is inconsistent!');
} else {
callback();
}
}
validateToNextPassword(rule, value, callback) {
const form = this.props.form;
if (value && this.state.confirmDirty) {
form.validateFields(['confirm'], {force: true});
}
callback();
}
handleWebsiteChange(value) {
let autoCompleteResult;
if (!value) {
autoCompleteResult = [];
} else {
autoCompleteResult = ['.com', '.org', '.net'].map(domain => `${value}${domain}`);
}
this.setState({autoCompleteResult});
}
render() {
const {getFieldDecorator} = this.props.form;
const {autoCompleteResult} = this.state;
const formItemLayout = {
labelCol: {
xs: {
span: 24
},
sm: {
span: 8
}
},
wrapperCol: {
xs: {
span: 24
},
sm: {
span: 16
}
}
};
const tailFormItemLayout = {
wrapperCol: {
xs: {
span: 24,
offset: 0
},
sm: {
span: 16,
offset: 8
}
}
};
const prefixSelector = getFieldDecorator('prefix', {initialValue: '98'})(<Select style={{
width: 70
}}>
<Option value="98">+98</Option>
</Select>);
const websiteOptions = autoCompleteResult.map(website => (<AutoCompleteOption key={website}>{website}</AutoCompleteOption>));
return (
<Form className="RegistrationForm" onSubmit={this.handleSubmit}>
<FormItem {...formItemLayout} label="E-mail">
{
getFieldDecorator('email', {
rules: [
{
type: 'email',
message: 'The input is not valid E-mail!'
}, {
required: true,
message: 'Please input your E-mail!'
}
]
})(<Input/>)
}
</FormItem>
<FormItem {...formItemLayout} label="Password">
{
getFieldDecorator('password', {
rules: [
{
required: true,
message: 'Please input your password!'
}, {
validator: this.validateToNextPassword
}
]
})(<Input type="password"/>)
}
</FormItem>
<FormItem {...formItemLayout} label="Confirm Password">
{
getFieldDecorator('confirm', {
rules: [
{
required: true,
message: 'Please confirm your password!'
}, {
validator: this.compareToFirstPassword
}
]
})(<Input type="password" onBlur={this.handleConfirmBlur}/>)
}
</FormItem>
<FormItem {...formItemLayout} label="Phone Number">
{
getFieldDecorator('phone', {
rules: [
{
required: true,
message: 'Please input your phone number!'
}
]
})(<Input addonBefore={prefixSelector} style={{
width: '100%'
}}/>)
}
</FormItem>
<FormItem {...formItemLayout} label="Website">
{
getFieldDecorator('website', {
rules: [
{
required: true,
message: 'Please input website!'
}
]
})(<AutoComplete dataSource={websiteOptions} onChange={this.handleWebsiteChange} placeholder="website">
<Input/>
</AutoComplete>)
}
</FormItem>
<FormItem {...formItemLayout} label="Captcha" extra="We must make sure that your are a human.">
<Row gutter={8}>
<Col span={12}>
{
getFieldDecorator('captcha', {
rules: [
{
required: true,
message: 'Please input the captcha you got!'
}
]
})(<Input/>)
}
</Col>
<Col span={12}>
<Button>Get captcha</Button>
</Col>
</Row>
</FormItem>
<FormItem {...tailFormItemLayout}>
<Button type="primary" htmlType="submit" onClick={this.handleSubmit}>Register</Button>
</FormItem>
</Form>
);
}
}main.js包含：
import { Form, Input, Tooltip, Icon, Cascader, Select, Row, Col, Checkbox, Button, AutoComplete } from 'antd';
const WrappedRegistrationForm = Form.create()(RegistrationForm);
ReactDOM.render(<WrappedRegistrationForm />, document.getElementById('main'));我怎么解决它呢？
回答 1
Stack Overflow用户
回答已采纳
发布于 2018-08-02 05:54:48
我从我的一个朋友那里收到了以下评论：
我看不到你的代码库，但我猜原因是你试图按需导入，但没有在你的项目中使用babel-plugin-import。
请参阅文档中的Import on Demand部分。
如果您使用的是create-react-app，您可以查看说明here。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51415627
复制相关文章
相似问题