Question

我的react应用存在问题。禁止我使用通用的JavaScript语法。将引发错误。我不知道从哪里开始解决问题。如果仍然缺少某些信息，请发表评论。然后，我将添加缺少的信息。抱歉，如果贡献太大了。

情况：

我已经在我的react应用程序（5.7版）中实现了laravel（16.8版）。也许是来自错误，并且某些错误或不正确。

当我试图在我的一个组件中使用这种代码时（对我来说似乎是有效的）

checkForUpdatingFreights = async () => {
...
}

我收到错误

语法错误：意外的令牌（51:29）

...   checkForUpdatingFreights = async（）=> {
                           ^
axios.get（'../ data / get / json / freightsCurrentlyUpdating'） .then（（response）=> {...

如果我用这种方式重写代码，它将起作用：

checkForUpdatingFreights() {
...
}

您是否有任何暗示，为什么不接受语法？这是react组件的完整代码：

import React, { Component } from 'react';
import styled from 'styled-components';
import axios from 'axios';

const RefreshLink = styled.a`
    text-decoration: underline;
    cursor: pointer;
    color: #000;
`

const signal = axios.CancelToken.source();

class UpdatingFreightsInfo extends Component {

    constructor(props) {
        super(props);
        this.state = { 
            freightsInUpdateProcess: false,
            hasFreightsBeenInUpdateStatusSincePageLoad: false,
            intervalId: -1,
        };

        this.checkForUpdatingFreights = this.checkForUpdatingFreights.bind(this);
    }

    componentDidMount() {
        this.getUpdatingFreightsInfo();
    }

    componentWillUnmount() {
        signal.cancel('Api is being canceled');
        clearInterval(this.state.intervalId);
    }

    getUpdatingFreightsInfo() {
        let intervalId  = setInterval(() => {
            this.checkForUpdatingFreights();
        },30000);
        this.setState({
            intervalId: intervalId
        });
    }   

    checkForUpdatingFreights = async () => {
        axios
        .get('../data/get/json/freightsCurrentlyUpdating')
        .then((response) => {
            console.log(response);
            if(response != undefined && response != null) {
                if(response.data.length > 0) {
                    this.setState({
                        freightsInUpdateProcess: true,
                        hasFreightsBeenInUpdateStatusSincePageLoad: true,
                    });
                }
                else {
                    this.setState({
                        freightsInUpdateProcess: false,
                    });
                }
            }
        })
        .catch(function (error) {
            console.log(error);
        });
    }

    render() {
    return (
            (this.state.freightsInUpdateProcess || (this.state.hasFreightsBeenInUpdateStatusSincePageLoad && !this.state.freightsInUpdateProcess )) && 
            <div className="container-fluid">
                <div className="row">
                    <div className="col-12 col-sm-12 col-md-12 col-lg-12">
                        <div className="alert alert-dark" role="alert">
                            <h4 className="alert-heading">Note</h4>
                            {
                                this.state.freightsInUpdateProcess && 
                                <p className="mb-0">Some freight entries are currently being updated.</p>
                            }
                            {
                                this.state.hasFreightsBeenInUpdateStatusSincePageLoad && !this.state.freightsInUpdateProcess && 
                                <p className="mb-0">
                                    The update process has been finished.
                                    <br />
                                    <span className="fa fa-refresh"></span><a href="/" target="_self">Please refresh the page</a>
                                </p>
                            }
                        </div>
                    </div>
                </div>
            </div>
    );
  }
}

export default UpdatingFreightsInfo;

javascript语法错误“意外令牌”

0 个答案: