React 组件'解析错误：意外的令牌，预期的“;”'渲染后

Question

I am trying to render some complex tertiary logic that organizes my application's components in the correct order. It keeps giving me an error at the bracket immediately after the render method.

I've found the same error described for similar situations on this website, but the solutions didn't help mine. Most of the troubleshooting I read about involved fixing how/where people called methods but this script is only running render. Additionally I made sure to wrap it in one tag and use className instead of class and all other JSX related syntax bug fixes.

Here is my App.js: I am passing along functions into the other components that toggle their respective states of the same name between true and false determining which gets rendered.

import React, { Component } from 'react';
import './index.css';
import Game from './Game.js'
import Homescreen from './Homescreen.js'
import PlayerScreen from './Playerscreen.js'

class App extends Component {
  constructor(props){
    super(props);
    this.state = {
      Homescreen: true,
      PlayerScreen: false,
      Game: false,
      players: [{
        users: '',
        points: 0,
    }]
  }

  render() {
    return (
      <div>
      {
        (this.state.Homescreen) ?
        <div id="wrapper">
          <Homescreen newScreen={()=>this.setState({Homescreen: false, PlayerScreen: true})}></Homescreen>
        </div> : (this.state.PlayerScreen) ? <div id="wrapper">
          <PlayerScreen players={this.state.players} start={(players)=>this.setState({PlayerScreen: false, Game: true, players: players})}></PlayerScreen>
        </div> : <div id="wrapper"><Game players={this.state.players}></Game></div>
      }
      </div>
      );
    }
  }
}

export default App;

Error message:

Failed to compile.

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

  18 |   }
  19 | 
> 20 |   render() {
     |            ^
  21 |     return (
  22 |       <div>
  23 |       {

Any help would be greatly appreciated.

Answer 1

You are missing a curly brackets in your state declaration.

constructor(props){
    super(props);
    this.state = {
      Homescreen: true,
      PlayerScreen: false,
      Game: false,
      players: [{
        users: '',
        points: 0,
    }]
  } // this is missing
}

Answer 2

the message is expecting a semi colon there because you haven't closed your constructor method;)

Take a break, walk around your apt/house/office give your eyes a second to catch these little things

Answer 3

      import React, { Component } from 'react';
      import './index.css';
      import Game from './Game.js'
      import Homescreen from './Homescreen.js'
      import PlayerScreen from './Playerscreen.js'

      class App extends Component {
        constructor(props) {
          super(props);
          this.state = {
            Homescreen: true,
            PlayerScreen: false,
            Game: false,
            players: [{
              users: '',
              points: 0,
            }]
          }
        }
        render() {
          return (
            <div>
              {
                (this.state.Homescreen) ?
                  <div id="wrapper">
                    <Homescreen newScreen={() => this.setState({ Homescreen: false, PlayerScreen: true })} />
                  </div> :
                  (this.state.PlayerScreen) ?
                    <div id="wrapper">
                      <PlayerScreen players={this.state.players} start={(players) => this.setState({ PlayerScreen: false, Game: true, players: players })} />
                    </div> :
                    <div id="wrapper">
                      <Game players={this.state.players} />
                    </div>
              }
            </div>
          );
        }
      }
      export default App

replace this code with yours and check

Answer 4

Make these changes to your main file.

showComponent = (component) => {
      this.setState({currentComponent: component})
    }


let checkCurrentScreen = this.state.currentScreen;
              {checkCurrentScreen === "homeScreen" ? (
                 <Homescreen showComponent={this.state.showComponent} />
                  ) : checkCurrentScreen ? (
                    <PlayerScreen showComponent={this.state.showComponent} />
                    ) : <DefaultScreen />
               }

Pass in your component with button click

const handleComponentChange = (e, component) => {
    e.preventDefault();
    props.showComponent(component)
  }

I apologize for my type o, I have corrected above. The last method is what I use in a separate component, I like this approach be cause it allows t his method to be used almost anywhere. Here is an example to the button used.

<button 
      onClick={e => handleComponentChange(e, "author")}
      className="comment-submit-button">Cancel
      </button>

This button will pass "e" and the name of the component to the method above the return. This allows for this method to be portable, here is the full method, perhaps this will help.

const handleComponentChange = (e, component) => { // passed in e
    e.preventDefault(); // for this
    props.showComponent(component);  // called method from index.js
  }

With my handleComponentChange I can pass in any props/state to use as I wish to use, plus the name of my component I want to render. I was able to easily add e for prevent default, plus the name.

ShowComponent sits in my index file, where I have my components that will be conditionally rendered.