JSX中的意外令牌，预期的“，” [关闭]答案

【问题标题】：Unexpected token, expected "," in JSX [closed]JSX中的意外令牌，预期的“，” [关闭]
【发布时间】：2019-05-24 18:52:48
【问题描述】：

我目前是一名正在开发 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>

【问题讨论】：

console.log(res.data),
删除所有悬空的逗号是值得的，这样您就不会再次遇到此问题。它们遍布您的代码。
@Andy，现在在某些地方积极鼓励使用令人困惑的尾随逗号：developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/… 我个人也不是粉丝。
@MattMorgan 他们不被鼓励，他们被支持。略有不同
我已经删除了逗号，但最初开始添加它们以尝试摆脱语法错误。我只是在需要的地方添加了逗号，然后当我继续收到更多的逗号错误时将其删除。谢谢！

标签： javascript reactjs syntax-error jsx comma

【解决方案1】：

更新这一行

console.log(res.data),

成为

console.log(res.data);

【讨论】：

在这些情况下，将问题标记为typo 错误。这类问题对社区没用
改回分号；我在那里使用逗号来尝试安抚逗号语法错误。谢谢！

【解决方案2】：

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

确保代码语法正确。

【讨论】：

【解决方案3】：

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

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>

【讨论】：