反应.js编译失败:意外令牌

Question

everyone.我一直收到此错误，但我不知道出了什么问题：

错误信息

它说有一个意想不到的标记，并且必须在某处有一个逗号。

有人可以告诉我，我的代码有什么问题吗？ 在这里。。渲染部分如下所示：

import React, { Component } from 'react';
import axios from 'axios';
export default class CreateOberbegriff extends Component {
constructor(props) {
super(props);
this.onChangeOberbegriff = this.onChangeOberbegriff.bind(this);
this.onSubmit = this.onSubmit.bind(this);
this.state = {
oberbegriff: ''
}
}
onChangeOberbegriff(e) {
this.setState({
oberbegriff: e.target.value
})
}
onSubmit(e) {
e.preventDefault();
const oberbegriff = {
oberbegriff: this.state.oberbegriff
}
console.log(oberbegriff);
axios.post('http://localhost:5000/oberbegriffe/add', oberbegriff
.then(res => console.log(res.data)),
this.setState({
oberbegriff: ''
})
,
render()
return (
<div>
<h3>Create New Oberbegriff</h3>
<form onSubmit={this.onSubmit}>
<div className="form-group">
<label>oberbegriff: </label>
<input  type="text"
required
className="form-control"
value={this.state.oberbegriff}
onChange={this.onChangeOberbegriff}
/>
</div>
<div className="form-group">
<input type="submit" value="Create Oberbegriff" className="btn btn-primary" />
</div>
</form>
</div>
),
}
}

Answer 1

渲染上方有一个逗号：

axios.post('http://localhost:5000/oberbegriffe/add', oberbegriff
.then(res => console.log(res.data)),
this.setState({
oberbegriff: ''
})
, // HERE IS YOUR COMMA
render()
return (
<div>

Answer 2

这一行是问题所在：

axios.post('http://localhost:5000/oberbegriffe/add', oberbegriff
.then(res => console.log(res.data)),

您没有关闭 post 函数，并且末尾还有一个逗号，它应该是一个分号：

axios.post('http://localhost:5000/oberbegriffe/add', oberbegriff)
.then(res => console.log(res.data));

它应该像这样工作。如果没有，只需写另一条评论。

整个文件应如下所示：

import React, { Component } from 'react';
import axios from 'axios';
export default class CreateOberbegriff extends Component {
constructor(props) {
super(props);
this.onChangeOberbegriff = this.onChangeOberbegriff.bind(this);
this.onSubmit = this.onSubmit.bind(this);
this.state = {
oberbegriff: ''
}
}
onChangeOberbegriff(e) {
this.setState({
oberbegriff: e.target.value
})
}
onSubmit(e) {
e.preventDefault();
const oberbegriff = {
oberbegriff: this.state.oberbegriff
}
console.log(oberbegriff);
axios.post('http://localhost:5000/oberbegriffe/add', oberbegriff)
.then(res => console.log(res.data))
this.setState({
oberbegriff: ''
})
} 

render()
return (
<div>
<h3>Create New Oberbegriff</h3>
<form onSubmit={this.onSubmit}>
<div className="form-group">
<label>oberbegriff: </label>
<input  type="text"
required
className="form-control"
value={this.state.oberbegriff}
onChange={this.onChangeOberbegriff}
/>
</div>
<div className="form-group">
<input type="submit" value="Create Oberbegriff" className="btn btn-primary" />
</div>
</form>
</div>
),
}
}

Answer 3

您发布的代码缺少几个括号。我已经在代码中注释了这些。

我建议在IDE中使用更漂亮的插件(VsCode或Brackets(，这样您就不会从编码中分心太多。

您的代码：

import React, { Component } from 'react';
import axios from 'axios';
export default class CreateOberbegriff extends Component {
constructor(props) {
super(props);
this.onChangeOberbegriff = this.onChangeOberbegriff.bind(this);
this.onSubmit = this.onSubmit.bind(this);
this.state = {
oberbegriff: ''
}
}
onChangeOberbegriff(e) {
this.setState({
oberbegriff: e.target.value
})
}
onSubmit(e) { // onSubmit method is missing the closing parenthesis
e.preventDefault();
const oberbegriff = {
oberbegriff: this.state.oberbegriff
}
console.log(oberbegriff);
axios.post('http://localhost:5000/oberbegriffe/add', oberbegriff
.then(res => console.log(res.data)), // axios.post() function is not closed 
this.setState({
oberbegriff: ''
})
, // obsolete here
render() // render method is missing both parenthesis {}
return (
<div>
<h3>Create New Oberbegriff</h3>
<form onSubmit={this.onSubmit}>
<div className="form-group">
<label>oberbegriff: </label>
<input  type="text"
required
className="form-control"
value={this.state.oberbegriff}
onChange={this.onChangeOberbegriff}
/>
</div>
<div className="form-group">
<input type="submit" value="Create Oberbegriff" className="btn btn-primary" />
</div>
</form>
</div>
), // oboslete here
}
}

代码更漂亮：

import React, { Component } from "react";
import axios from "axios";
export default class CreateOberbegriff extends Component {
constructor(props) {
super(props);
this.onChangeOberbegriff = this.onChangeOberbegriff.bind(this);
this.onSubmit = this.onSubmit.bind(this);
this.state = {
oberbegriff: "",
};
}
onChangeOberbegriff(e) {
this.setState({
oberbegriff: e.target.value,
});
}
onSubmit(e) {
e.preventDefault();
const oberbegriff = {
oberbegriff: this.state.oberbegriff,
};
console.log(oberbegriff);
axios.post(
"http://localhost:5000/oberbegriffe/add",
oberbegriff.then((res) => console.log(res.data)),
this.setState({ oberbegriff: "" })
);
}
render() {
return (
<div>
<h3>Create New Oberbegriff</h3>
<form onSubmit={this.onSubmit}>
<div className='form-group'>
<label>oberbegriff: </label>
<input
type='text'
required
className='form-control'
value={this.state.oberbegriff}
onChange={this.onChangeOberbegriff}
/>
</div>
<div className='form-group'>
<input type='submit' value='Create Oberbegriff' className='btn btn-primary' />
</div>
</form>
</div>
);
}
}