Модификатор `asyn c 'может использоваться только в TypeScript files.ts (8009)` Ошибка при использовании asyn c в реакции. js

Question

Поэтому, когда я пытаюсь добавить async/await в файл реакции, я получаю эту ошибку:

The 'async' modifier can only be used in TypeScript files.ts(8009)

Означает ли это, что я не могу использовать async/await в React или это проблема кода? или что я могу сделать, чтобы включить его?

Вот весь файл:

import React from 'react'
import Button from 'react-bootstrap/Button'
import {addOrder} from '../actions/orderAction'
import {connect} from 'react-redux'

class Dish extends React.Component{

    async handleClick = (dish) =>{
     this.props.addOrder(dish)
     localStorage.setItem("order", this.props.order)
     alert(`${dish.name} added to your order!`)
    }


    render(){
      let dish = this.props.dish  
        return(
        <div className="col-4">  
            <img />
            <h5>{dish.name}         ${dish.price}</h5>
            <Button onClick = {()=>this.handleClick(dish)} size="sm" variant="primary">Order</Button> 
        </div>
    )
  }
}

const mapDispatchToProps = dispatch =>{
    return {
        addOrder: (dish) =>dispatch(addOrder(dish))
    }
}

const mapStateToProps = state =>{
    return{
        order: state.order
    }
}


export default connect(null,mapDispatchToProps)(Dish)

Спасибо!

Answer 1

Вы можете попробовать либо

 async handleClick(dish){
     this.props.addOrder(dish)
     localStorage.setItem("order", this.props.order)
     alert(`${dish.name} added to your order!`)
    }

ИЛИ

 handleClick = async(dish) => {
     this.props.addOrder(dish)
     localStorage.setItem("order", this.props.order)
     alert(`${dish.name} added to your order!`)
    }

Answer 2

Если вы пробовали это в настройках. json

"javascript .validate.enable": true