Javascript TypeError:无法读取属性';追加';未定义的
尝试在react中提交表单时,我在handlesubmit中遇到此错误Javascript TypeError:无法读取属性';追加';未定义的,javascript,reactjs,Javascript,Reactjs,尝试在react中提交表单时,我在handlesubmit中遇到此错误 TypeError: Cannot read property 'append' of undefined _class.handleSubmit src/containers/RegisterTenant/register.js:37 34 | 35 | handleSubmit(event){ 36 | event.preventDefault(); > 37 | this.data.appe
TypeError: Cannot read property 'append' of undefined
_class.handleSubmit
src/containers/RegisterTenant/register.js:37
34 |
35 | handleSubmit(event){
36 | event.preventDefault();
> 37 | this.data.append("TenantId", this.state.tenantid);
38 | this.data.append("TenanrUrl", this.state.tenanturl);
39 | this.data.append("TenantPassword", this.state.tenantpassword);
我的代码是
import React, { Component } from 'react';
import { Row, Col } from 'antd';
import PageHeader from '../../components/utility/pageHeader';
import Box from '../../components/utility/box';
import LayoutWrapper from '../../components/utility/layoutWrapper.js';
import ContentHolder from '../../components/utility/contentHolder';
import basicStyle from '../../settings/basicStyle';
import IntlMessages from '../../components/utility/intlMessages';
import { adalApiFetch } from '../../adalConfig';
export default class extends Component {
constructor(props) {
super(props);
this.state = {TenantId: '',TenanrUrl:'',TenantPassword:''};
this.handleChangeTenantUrl = this.handleChangeTenantUrl.bind(this);
this.handleChangeTenantPassword = this.handleChangeTenantPassword.bind(this);
this.handleChangeTenantId= this.handleChangeTenantId.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
};
handleChangeTenantUrl(event){
this.setState({tenanturl: event.target.value});
}
handleChangeTenantPassword(event){
this.setState({tenantpassword: event.target.value});
}
handleChangeTenantId(event){
this.setState({tenantid: event.target.value});
}
handleSubmit(event){
event.preventDefault();
this.data.append("TenantId", this.state.tenantid);
this.data.append("TenanrUrl", this.state.tenanturl);
this.data.append("TenantPassword", this.state.tenantpassword);
const options = {
method: 'post',
data: this.data,
config: {
headers: {
'Content-Type': 'multipart/form-data'
}
}
};
adalApiFetch(options)
.then(response => response.json())
.then(responseJson => {
if (!this.isCancelled) {
this.setState({ data: responseJson });
}
})
.catch(error => {
console.error(error);
});
}
upload(e){
let data = new FormData();
//Append files to form data
let files = e.target.files;
for (let i = 0; i < files.length; i++) {
data.append('files', files[i], files[i].name);
}
}
render(){
const { data } = this.state;
const { rowStyle, colStyle, gutter } = basicStyle;
return (
<div>
<LayoutWrapper>
<PageHeader>{<IntlMessages id="pageTitles.TenantAdministration" />}</PageHeader>
<Row style={rowStyle} gutter={gutter} justify="start">
<Col md={12} sm={12} xs={24} style={colStyle}>
<Box
title={<IntlMessages id="pageTitles.TenantAdministration" />}
subtitle={<IntlMessages id="pageTitles.TenantAdministration" />}
>
<ContentHolder>
<form onSubmit={this.handleSubmit}>
<label>
TenantId:
<input type="text" value={this.state.tenantid} onChange={this.handleChangeTenantId} />
</label>
<label>
TenantUrl:
<input type="text" value={this.state.tenanturl} onChange={this.handleChangeTenantUrl} />
</label>
<label>
TenantPassword:
<input type="text" value={this.state.tenantpassword} onChange={this.handleChangeTenantPassword} />
</label>
<label>
Certificate:
<input onChange = { e => this.upload(e) } type = "file" id = "files" ref = { file => this.fileUpload } />
</label>
<input type="submit" value="Submit" />
</form>
</ContentHolder>
</Box>
</Col>
</Row>
</LayoutWrapper>
</div>
);
}
}
import React,{Component}来自'React';
从“antd”导入{Row,Col};
从“../../components/utility/PageHeader”导入PageHeader;
从“../../components/utility/Box”导入框;
从“../../components/utility/LayoutWrapper.js”导入LayoutWrapper;
从“../../components/utility/ContentHolder”导入ContentHolder;
从“../../settings/basicStyle”导入basicStyle;
从“../../components/utility/IntlMessages”导入IntlMessages;
从“../../adalConfig”导入{adalApiFetch};
导出默认类扩展组件{
建造师(道具){
超级(道具);
this.state={TenantId:'',tenarUrl:'',TenantPassword:''};
this.handlechangetranturl=this.handlechangetranturl.bind(this);
this.handlechangetantpassword=this.handlechangetantpassword.bind(this);
this.handlechangetantid=this.handlechangetantid.bind(this);
this.handleSubmit=this.handleSubmit.bind(this);
};
handleChangeTenantUrl(事件){
this.setState({tenanturl:event.target.value});
}
handleChangeTenantPassword(事件){
this.setState({tenantpassword:event.target.value});
}
handlechangetrantid(事件){
this.setState({tenantid:event.target.value});
}
handleSubmit(事件){
event.preventDefault();
this.data.append(“TenantId”,this.state.TenantId);
this.data.append(“tenarurl”,this.state.tenatorl);
this.data.append(“TenantPassword”,this.state.TenantPassword);
常量选项={
方法:“post”,
数据:这个数据,
配置:{
标题:{
“内容类型”:“多部分/表单数据”
}
}
};
adalApiFetch(选项)
.then(response=>response.json())
.然后(responseJson=>{
如果(!this.isCancelled){
this.setState({data:responseJson});
}
})
.catch(错误=>{
控制台错误(error);
});
}
上传(e){
let data=new FormData();
//将文件附加到表单数据
让files=e.target.files;
for(设i=0;ithis.fileUpload}/>
);
}
}
您在代码中的任何位置都不创建此.data
,因此此.data
将是未定义的
,尝试在其上使用append
将导致错误
您可以在handleSubmit
中创建一个新的
示例
handleSubmit(event){
event.preventDefault();
const formData = new FormData();
formData.append("TenantId", this.state.tenantid);
formData.append("TenanrUrl", this.state.tenanturl);
formData.append("TenantPassword", this.state.tenantpassword);
const options = {
method: 'post',
data: formData,
config: {
headers: {
'Content-Type': 'multipart/form-data'
}
}
};
adalApiFetch(options)
.then(response => response.json())
.then(responseJson => {
if (!this.isCancelled) {
this.setState({ data: responseJson });
}
})
.catch(error => {
console.error(error);
});
}
您在代码中的任何位置都不创建
此.data
。这是故意的吗?