React Component 'Ошибка синтаксического анализа: неожиданный токен, ожидается ";" "после рендеринга

Question

Я пытаюсь воспроизвести некоторую сложную третичную логику, которая организует компоненты моего приложения в правильном порядке. Он продолжает выдавать ошибку в скобках сразу после метода рендеринга.

Я обнаружил ту же ошибку, описанную для похожих ситуаций на этом сайте, но решения не помогли моей. Большая часть устранения неполадок, о которых я читал, заключалась в исправлении того, как / где люди вызывали методы, но этот скрипт только выполняет рендер. Кроме того, я позаботился о том, чтобы обернуть его в один тег и использовать className вместо class и все другие исправления ошибок синтаксиса, связанные с JSX.

Вот мой App.js: я передаю функции другим компонентам, которые переключают ихсоответствующие состояния одного и того же имени между истинным и ложным определением, которое отображается.

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
}

Answer 2

Внесите эти изменения в ваш основной файл.

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 />
               }

Передайте ваш компонент нажатием кнопки

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

Я извиняюсь за свой тип o, я исправил выше. Последний метод - это то, что я использую в отдельном компоненте, мне нравится этот подход, потому что он позволяет использовать его метод практически везде. Вот пример используемой кнопки:

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

Эта кнопка передаст "e" и имя компонента методу выше возврата. Это позволяет сделать этот метод переносимым, вот полный метод, возможно, это поможет.

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

С помощью handleComponentChange я могу передать любой реквизит / состояние для использования по своему усмотрению, плюсназвание моего компонента, которое я хочу сделать. Я был в состоянии легко добавить е для предотвращения по умолчанию, а также имя.

ShowComponent находится в моем индексном файле, где у меня есть компоненты, которые будут отображаться условно.

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

замените этот код своим и отметьте

Answer 4

сообщение ожидает, что там стоит точка с запятой, потому что вы не закрыли свой метод конструктора;)

Сделайте перерыв, прогуляйтесь по своей квартире / дому / офису, дайте глазам секунду, чтобы поймать эти мелочи