Javascript 类属性必须是方法。预期';(';但相反,看到了';=';
我有一个react应用程序,我有这段代码,但fetchdata方法似乎充满了语法错误,第一个错误显示在问题的标题上 这个方法有什么问题Javascript 类属性必须是方法。预期';(';但相反,看到了';=';,javascript,reactjs,Javascript,Reactjs,我有一个react应用程序,我有这段代码,但fetchdata方法似乎充满了语法错误,第一个错误显示在问题的标题上 这个方法有什么问题 import React, { Component } from 'react'; import { Row, Col } from 'antd'; import PageHeader from '../../components/utility/pageHeader'; import Box from '../../components/utility/bo
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';
const data = {
TenantId: this.this.state.tenantid,
TenanrUrl: this.state.tenanturl,
TenantPassword: this.state.tenantpassword
};
const options = {
method: 'post',
data: data,
config: {
headers: {
'Content-Type': 'multipart/form-data'
}
}
};
export default class extends Component {
constructor(props) {
super(props);
this.state = {value: ''};
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){
alert('A name was submitted: ' + this.state.value);
event.preventDefault();
fetchData();
}
fetchData = () => {
adalApiFetch(fetch, "/tenant", 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);
}
let d = {
method: 'post',
url: API_SERVER,
data: data,
config: {
headers: {
'Content-Type': 'multipart/form-data'
},
},
onUploadProgress: (eve) => {
let progress = utility.UploadProgress(eve);
if (progress == 100) {
console.log("Done");
} else {
console.log("Uploading...",progress);
}
},
};
let req = axios(d);
return new Promise((resolve)=>{
req.then((res)=>{
return resolve(res.data);
});
});
}
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.TenantPassword
};
常量选项={
方法:“post”,
数据:数据,
配置:{
标题:{
“内容类型”:“多部分/表单数据”
}
}
};
导出默认类扩展组件{
建造师(道具){
超级(道具);
this.state={value:''};
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(事件){
警报(“已提交名称:”+this.state.value);
event.preventDefault();
fetchData();
}
fetchData=()=>{
adalApiFetch(获取“/tenant”,选项)
.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;i{
let progress=utility.UploadProgress(eve);
如果(进度==100){
控制台日志(“完成”);
}否则{
控制台日志(“上传…”,进度);
}
},
};
设req=axios(d);
返回新承诺((解决)=>{
请求然后((res)=>{
返回解析(res.data);
});
});
}
render(){
const{data}=this.state;
const{rowStyle,colStyle,gutter}=basicStyle;
返回(
{}
租户:
租户:
租户密码:
证书:
this.upload(e)}type=“file”id=“files”ref={file=>this.fileUpload}/>
);
}
}
您已经以类属性
的形式编写了fetchData
方法,该属性还不是语言的一部分。您可以添加Babel插件或具有它的预设,如
如果不想配置Babel,可以在构造函数中绑定该方法,就像对其他方法所做的那样:
export default class extends Component {
constructor(props) {
super(props);
this.state = {value: ''};
this.handleChangeTenantUrl = this.handleChangeTenantUrl.bind(this);
this.handleChangeTenantPassword = this.handleChangeTenantPassword.bind(this);
this.handleChangeTenantId= this.handleChangeTenantId.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
this.fetchData = this.fetchData.bind(this);
}
fetchData() {
adalApiFetch(fetch, "/tenant", options)
.then(response => response.json())
.then(responseJson => {
if (!this.isCancelled) {
this.setState({ data: responseJson });
}
})
.catch(error => {
console.error(error);
});
}
// ...
}
您以前定义过fetchdata变量吗?如果没有,也许您应该在当前行中执行此操作:
var fetchdata = () => { ...