JSX 中的意外标记，预期为“,”

Question

我目前是一名研究 React 应用程序的学生，并且在我的 onSubmit() 函数中不断收到意外标记的返回语法错误。它需要逗号而不是大括号，我不明白为什么。我添加逗号，将大括号换成逗号，然后重新做一遍，但无济于事。我有什么想法可能会犯错吗？

import React from 'react';
import axios from 'axios';
import Info from './Info';


export default class Search extends React.Component{
  state = {
    ingredientName: '',
  };

  change = e => {
    this.setState({
      [e.target.name] : e.target.value,
    });
  };

  onSubmit() {
    e.preventDefault();
    const userInput = JSON.stringify(this.state);
      axios.get(`https://www.recipepuppy.com/api/?i=${this.state}`).then((res) => {
        console.log(res.data),
      }
  };


};


  render(){
    return (
      <div>
      <form>
      <input name="ingredientName" placeholder="chicken, rice, tomatoes, etc" value={this.state.ingredientName} onChange={e => this.change(e)}/>
      <button onClick={e => this.onSubmit(e)}>Submit</button>
      </form>
      </div>
    )
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

Answer 1

更新这一行

console.log(res.data),

成为

console.log(res.data);

Answer 2

表达式必须以分号“;”结尾还有一件事：你仍然需要关闭 .then callback with ')'

import React from 'react';
import axios from 'axios';
import Info from './Info';


export default class Search extends React.Component{
  state = {
    ingredientName: '',
  };

  change = e => {
    this.setState({
      [e.target.name] : e.target.value,
    });
  };

  onSubmit() {
    e.preventDefault();
    const userInput = JSON.stringify(this.state);
    axios.get(`https://www.recipepuppy.com/api/?i=${this.state}`).then((res) => {
        console.log(res.data);
    })
  };


};


  render(){
    return (
      <div>
      <form>
      <input name="ingredientName" placeholder="chicken, rice, tomatoes, etc" value={this.state.ingredientName} onChange={e => this.change(e)}/>
      <button onClick={e => this.onSubmit(e)}>Submit</button>
      </form>
      </div>
    )
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

Answer 3

import React from 'react';
import axios from 'axios';

export default class Search extends React.Component {
  state = {
    ingredientName: '',
  };

  change = e => {
    this.setState({
      [e.target.name]: e.target.value,
    });
  };

  onSubmit() {
    e.preventDefault();
    const userInput = JSON.stringify(this.state);
    axios.get(`https://www.recipepuppy.com/api/?i=${this.state}`).then(res => {
      console.log(res.data);
      });
  };

render(){
  return (
    <div>
      <form>
        <input name="ingredientName" placeholder="chicken, rice, tomatoes, etc" value={this.state.ingredientName} onChange={e => this.change(e)} />
        <button onClick={e => this.onSubmit(e)}>Submit</button>
      </form>
    </div>
  )
}
}

确保代码语法正确。

JSX 中的意外标记，预期为“,”

Unexpected token, expected "," in JSX

javascript

comma

syntax-error

jsx

reactjs