解析错误：意外的令牌，预期为“;”

时间：2019-05-03 10:37:05

标签： reactjs

我检查了我是否有未封闭的标签，括号和花括号。对我来说没有问题。

我设置了节点并响应环境，并启动并运行了localhost：3000。对我来说没问题。

但是我不知道在哪里看。有什么主意吗？感谢您的帮助。

class App extends React.Component {
constructor(props) {
    super(props);
        this.state = {
            addLevel1Num1: 1,
            addLevel1Num2: 1,
            subLevel1Num1: 1,
            subLevel1Num2: 1,
            addLevel2Num1: 1,
            addLevel2Num2: 1,
            subLevel2Num1: 20,
            subLevel2Num2: 20,
            response: "",
            incorrect: false,
            score: 0,
                // scoreSubLevel1: 3
        };
    }
}


class ProblemAddLevel1 extends React.Component {
    render() {
        return (
            <div>
                <h1 id="mainTitle">Welcome to the Review Math Game Area!</h1>
                <div id="problem" className={this.state.incorrect ? "incorrect" : ""}>
                {this.state.addLevel1Num1} + {this.state.addLevel1Num2} = <input onKeyPress={this.inputKeyPressAddLevel1} onChange={this.updateResponse} value={this.state.response} class="resizedTextBox"/>
                Score: {this.state.score} <button onClick={this.resetLineAddLevel1} class="btn btn-primary">Reset Line</button> <button onClick={this.resetFullGame} class="btn btn-primary">Reset Full Game</button>
                </div>
           </div>
        ); 
    }
}

....跳过了与上面类似的代码。

render() {
    if (this.state.score < 3) {
        return <ProblemAddLevel1 />;
    }
    if (this.state.score < 6) {
        return <ProblemSubLevel1 />;
    }
    if (this.state.score < 9) {
        return <ProblemAddLevel2 />;
    }
    if (this.state.score < 15) {
        return <ProblemSubLevel1 />;
    }
    if (this.state.score === 15) {
        return <WinRace />;
    }
}

.... 

ReactDOM.render((
    <div>
        <App />
        <ProblemAddLevel1 />
        <ProblemSubLevel1 />
        <ProblemAddLevel2 />
        <ProblemSubLevel1 />
        <WinRace />
    </div>
), document.querySelector("#app"));

我在浏览器中收到此错误：

Failed to compile

./src/App.js
  Line 109:  Parsing error: Unexpected token, expected ";"

  107 | 
  108 | 
> 109 | render() {
      |          ^
  110 |     if (this.state.score < 3) {
  111 |         return <ProblemAddLevel1 />;
  112 |     }

This error occurred during the build time and cannot be dismissed.

我在今天的这个工作中进行了重修，以查找其他问题和修补程序：

APP.JS 

import React, { Component } from "react";
import ReactDOM from "react-dom";
import './index.js';
import './index.css';

class App extends React.Component {
    constructor(props) {
        super(props);
            this.state = {
                addLevel1Num1: 1,
                addLevel1Num2: 1,
                subLevel1Num1: 1,
                subLevel1Num2: 1,
                addLevel2Num1: 1,
                addLevel2Num2: 1,
                subLevel2Num1: 20,
                subLevel2Num2: 20,
                response: "",
                incorrect: false,
                score: 0,
                // scoreSubLevel1: 3
            };
        }

    render() {
        if (this.state.score < 3) {
            return <ProblemAddLevel1 />;
        }
        if (this.state.score < 6) {
            return <ProblemSubLevel1 />;
        }
        if (this.state.score < 9) {
            return <ProblemAddLevel2 />;
        }
        if (this.state.score < 15) {
            return <ProblemSubLevel1 />;
        }
        if (this.state.score === 15) {
            return <WinRace />;
        }
    }
    default export App;
}


class ProblemAddLevel1 extends React.Component {
    render() {
        return (
            <div>
                <h1 id="mainTitle">Welcome to the Review Math Game Area!</h1>
                <div id="problem" className={this.state.incorrect ? "incorrect" : ""}>
                {this.state.addLevel1Num1} + {this.state.addLevel1Num2} = <input onKeyPress={this.inputKeyPressAddLevel1} onChange={this.updateResponse} value={this.state.response} class="resizedTextBox"/>
                Score: {this.state.score} <button onClick={this.resetLineAddLevel1} class="btn btn-primary">Reset Line</button> <button onClick={this.resetFullGame} class="btn btn-primary">Reset Full Game</button>
                </div>
           </div>
        );
    }
}



class ProblemSubLevel1 extends React.Component {
    render() {
        return (
        <div>
            <h1 id="mainTitle">Welcome to the Review Math Game Area!</h1>
            <div id="problem" className={this.state.incorrect ? "incorrect" : ""}>
            {this.state.subLevel1Num1} - {this.state.subLevel1Num2} = <input onKeyPress={this.inputKeyPressSubLevel1} onChange={this.updateResponse} value={this.state.response} class="resizedTextBox"/>
            Score: {this.state.score} <button onClick={this.resetLineSubLevel1} class="btn btn-primary">Reset Line</button> <button onClick={this.resetFullGame} class="btn btn-primary">Reset Full Game</button>
            <img id="green-leaf" src={'./green-leaf.svg'} />
            </div>
       </div>
       );
    }
}


class ProblemAddLevel2 extends React.Component {
    render() {
        return (
            <div>
                <h1 id="mainTitle">Welcome to the Review Math Game Area!</h1>
                <div id="problem" className={this.state.incorrect ? "incorrect" : ""}>
                {this.state.addLevel2Num1} + {this.state.addLevel2Num2} = <input onKeyPress={this.inputKeyPressAddLevel2} onChange={this.updateResponse} value={this.state.response} class="resizedTextBox"/>
                Score: {this.state.score} <button onClick={this.resetLineAddLevel2} class="btn btn-primary">Reset Line</button> <button onClick={this.resetFullGame} class="btn btn-primary">Reset Full Game</button>
               <img id="green-leaf" src={'./green-leaf.svg'} />
               <img id="green-leaf" src={'./green-leaf.svg'} />
               </div>
           </div>
        );
    }
}


class ProblemSubLevel2 extends React.Component {
    render() {
        return (
            <div>
                <h1 id="mainTitle">Welcome to the Review Math Game Area!</h1>
                <div id="problem" className={this.state.incorrect ? "incorrect" : ""}>
                {this.state.subLevel2Num1} - {this.state.subLevel2Num2} = <input onKeyPress={this.inputKeyPressSubLevel2} onChange={this.updateResponse} value={this.state.response} class="resizedTextBox"/>
                Score: {this.state.score} <button onClick={this.resetLineSubLevel2} class="btn btn-primary">Reset Line</button> <button onClick={this.resetFullGame} class="btn btn-primary">Reset Full Game</button>
                <img id="green-leaf" src={'./green-leaf.svg'} />
                <img id="green-leaf" src={'./green-leaf.svg'} />
                <img id="green-leaf" src={'./green-leaf.svg'} />
                </div>
            </div>
        );
    }
}


class WinRace extends React.Component {
    render() {
        return (
            <div>
                <h1 id="mainTitle">Well done! You won the Four Green Leaves Title!</h1>
                <div id="problem" className={this.state.incorrect ? "incorrect" : ""}>
                Score: {this.state.score}
                <img id="green-leaf" src={'./green-leaf.svg'} />
                <img id="green-leaf" src={'./green-leaf.svg'} />
                <img id="green-leaf" src={'./green-leaf.svg'} />
                <img id="green-leaf" src={'./green-leaf.svg'} />
                <h2 id="mainTitle">Come back to review your maths in a few days!</h2>
                <button onClick={this.resetFullGame} class="btn btn-primary">Reset Full Game</button>
                </div>
            </div>
        );
    }
}


updateResponse = (event) => {
    this.setState({ response: event.target.value });
}

inputKeyPressAddLevel1 = (event) => {
    if (event.key === "Enter") {
        const answer = parseInt(this.state.response);
        if (answer === this.state.addLevel1Num1 + this.state.addLevel1Num2) {
            this.setState(state => ({
                addLevel1Num1: Math.ceil(Math.random() * 10) + state.score,
                addLevel1Num2: Math.ceil(Math.random() * 10) + state.score,
                // subLevel1Num1: Math.ceil(Math.random() * 10) + state.scoreSubLevel1,
                // subLevel1Num2: Math.ceil(Math.random() * 10) + state.scoreSubLevel2,
                response: "",
                incorrect: false,
                score: state.score + 1
            }));
        } else {
            this.setState({
                 response: "",
                 incorrect: true
            });
        }
    }
}


inputKeyPressSubLevel1 = (event) => {
    if (event.key === "Enter") {
        const answer = parseInt(this.state.response);
        if (answer === this.state.subLevel1Num1 - this.state.subLevel1Num2) {
            this.setState(state => ({
                subLevel1Num1: Math.ceil(Math.random() * 10) + state.score,
                subLevel1Num2: Math.ceil(Math.random() * 10) + state.score,
                response: "",
                incorrect: false,
                score: state.score + 1
            }));
        } else {
            this.setState({
                response: "",
                incorrect: true
            });
        }
    }
}


inputKeyPressAddLevel2 = (event) => {
    if (event.key === "Enter") {
        const answer = parseInt(this.state.response);
        if (answer === this.state.addLevel2Num1 + this.state.addLevel2Num2) {
            this.setState(state => ({
                addLevel2Num1: (Math.ceil(Math.random() * 10)) * 2 + state.score,
                addLevel2Num2: (Math.ceil(Math.random() * 10)) * 2 + state.score,
                // subLevel1Num1: Math.ceil(Math.random() * 10) + state.scoreSubLevel1,
                // subLevel1Num2: Math.ceil(Math.random() * 10) + state.scoreSubLevel2,
                response: "",
                incorrect: false,
                score: state.score + 1
            }));
        } else {
            this.setState({
                response: "",
                incorrect: true
            });
        }
    }
}


inputKeyPressSubLevel2 = (event) => {
    if (event.key === "Enter") {
        const answer = parseInt(this.state.response);
        if (answer === this.state.subLevel2Num1 - this.state.subLevel2Num2) {
            this.setState(state => ({
                subLevel2Num1: Math.ceil(Math.random() * 10) + state.score,
                subLevel2Num2: Math.ceil(Math.random() * 10) + state.score,
                response: "",
                incorrect: false,
                score: state.score + 1
            }));
        } else {
            this.setState({
                response: "",
                incorrect: true
            });
        }
    }
}


resetFullGame = (event) => {
    this.setState({
        addLevel1Num1: 1,
        addLevel1Num2: 1,
        subLevel1Num1: 1,
        subLevel1Num2: 1,
        addLevel2Num1: 1,
        addLevel2Num2: 1,
        subLevel2Num1: 1,
        subLevel2Num2: 1,
        response: "",
        incorrect: false,
        score: 0,
        // scoreSubLevel1: 0
    });
}


resetLineAddLevel1 = (event) => {
    this.setState({
        addLevel1Num1: 1,
        addLevel1Num2: 1,
        response: "",
        incorrect: false
    });
}


resetLineSubLevel1 = (event) => {
    this.setState({
        subLevel1Num1: 1,
        subLevel1Num2: 1,
        response: "",
        incorrect: false
    });
}


resetLineAddLevel2 = (event) => {
    this.setState({
        addLevel2Num1: 1,
        addLevel2Num2: 1,
        response: "",
        incorrect: false
    });
}


resetLineSubLevel1 = (event) => {
    this.setState({
        subLevel2Num1: 20,
        subLevel2Num2: 20,
        response: "",
        incorrect: false
    });
}


ReactDOM.render((
    <div>
        <App />
        <ProblemAddLevel1 />
        <ProblemSubLevel1 />
        <ProblemAddLevel2 />
        <ProblemSubLevel1 />
        <WinRace />
    </div>
), document.querySelector("#app"));

INDEX.JS 

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App.js';
import * as serviceWorker from './serviceWorker';

ReactDOM.render(<App />, document.getElementById('root'));

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: 
serviceWorker.unregister();

//export {default} from App;

2 个答案:

答案 0 :(得分：1)

我可以看到多个错误，但最明显的是：

  1. 您不能在React组件中使用class。请改用className。例如此处：

    <button onClick={this.resetLineAddLevel1} class="btn btn-primary">Reset Line</button>

  2. 导出必须位于顶层。这意味着在任何{和}之外，它们的写法不同：

    default export App;

    应该是

    export default App;

  3. 在某些情况下，您的方法不返回任何内容。您的方法应始终返回一个组件或至少返回null，例如在这里：

    render() {
    if (this.state.score < 3) {
        return <ProblemAddLevel1 />;
    }
    if (this.state.score < 6) {
        return <ProblemSubLevel1 />;
    }
    if (this.state.score < 9) {
        return <ProblemAddLevel2 />;
    }
    if (this.state.score < 15) {
        return <ProblemSubLevel1 />;
    }
    if (this.state.score === 15) {
        return <WinRace />;
    }

    // missing return
}
  1. 您的事件处理程序，例如updateResponse是在顶级声明的，而不是在任何类的内部声明的，但是您在其中使用this。

总而言之，我真的建议您退一步，从更基本的内容开始，最好找到一个好的编辑器（例如Webstorm），该编辑器将立即向您显示所有错误。

答案 1 :(得分：0)

您需要渲染一个元素。 TimeSpan.Parse()默认情况下

<div></div>

ifs不能直接返回，如果要返回，则需要用一句话完成，可以使用返回组件的匿名函数进行返回

对不起，我的英语不好：c

相关问题
最新问题