javascript - 渲染后 react 组件 'Parsing error: Unexpected token, expected ";"'

Question

我正在尝试呈现一些复杂的三级逻辑，以正确的顺序组织我的应用程序的组件。在 render 方法之后，它一直在括号中给我一个错误。

我在本网站上发现了针对类似情况描述的相同错误，但解决方案对我没有帮助。我读到的大多数故障排除都涉及修复人们调用方法的方式/位置，但此脚本仅运行渲染。此外，我确保将它包装在一个标签中并使用 className 而不是 class 以及所有其他 JSX 相关语法错误修复。

这是我的 App.js:我将函数传递给其他组件，这些组件在 true 和 false 之间切换它们各自的同名状态，以确定呈现哪个。

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;

错误信息:

Failed to compile.

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

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

如有任何帮助，我们将不胜感激。

Answer 1

您在状态声明中缺少大括号。

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