javascript - TypeError:无法读取未定义的属性“附加”
问题描述
尝试在反应中提交表单,我在句柄提交中收到此错误
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>
);
}
}
解决方案
this.data
您在代码中的任何地方都没有创建,因此尝试使用它this.data
会导致您的错误。undefined
append
FormData
你可以在你的中创建一个新的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);
});
}
推荐阅读
- kotlin - 如何转换反应堆通量
到输入流 - javascript - dygraph:x轴y轴设置最小值和最大值
- javascript - chrome 扩展:OAuth2 请求失败:服务响应错误:“错误请求”
- reactjs - React 上的输入字段状态更改
- arduino - 如何进行继承
- python - 为什么map和filter函数在python3中返回迭代器?
- scala - 无法使用 CSV 文件的 spark scala 显示数据帧记录
- php - 从字符串更改为 PHP 数组
- excel - Excel 多个值求和
- c# - 如何使用 stringbuilder 在 c# 中创建和下载 pdf 文件?