Question

每个人。我不断收到此错误，但我不知道出了什么问题：

它说有一个意外的令牌，并且某处必须有一个逗号。

有人可以告诉我，我的代码有什么问题吗？渲染部分在下面：

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

render上方有一个逗号：

  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>
    );
  }
}

React.js编译失败：意外令牌

3 个答案:

您的代码：

代码更漂亮：