Ошибка объявления переменной внутри класса компонента и вне функции рендеринга, чтобы использовать ее внутри функции рендеринга в реакции

в приведенном ниже коде, когда я объявляю переменные символы с помощью деструктуризации

const { characters } = this.state;

Я получаю неожиданную ошибку токена.

import React, { Component } from "react";
import Table from "./Table";
class App extends Component {
  state = {
    characters: [
      {
        name: "Charlie",
        job: "Janitor"
      },
      {
        name: "Mac",
        job: "Bouncer"
      },
      {
        name: "Dee",
        job: "Aspring actress"
      },
      {
        name: "Dennis",
        job: "Bartender"
      }
    ]
  };
  removeCharacter = index => {
    const { characters } = this.state;

    this.setState({
      characters: characters.filter((character, i) => {
        return i !== index;
      })
    });
  };
   const { characters } = this.state;
  render() {
   
    return (
      <React.Fragment>
        <div className="App">
          <h1>Hello, React!</h1>
        </div>

        <div className="container">
          <Table
            characterData={characters}
            removeCharacter={this.removeCharacter}
          />
        </div>
      </React.Fragment>
    );
  }
}

export default App;

вот песочница кода: песочница с ошибкой, посмотрите файл app.js

и когда я помещаю объявление в функцию рендеринга, проблем не возникает, взгляните на тестовую среду кода правильного кода.

Также, когда я создаю переменную вне функции рендеринга (файла App.js), без const или let, например:

x=1;

Он отлично работает, когда я использую его внутри функции рендеринга как this.x, но когда я объявляю его с помощью let, const или var, он выдает мне неожиданную ошибку токена.

Как вы объясните такое поведение?


reactjs class variables render
person Alitaras    schedule 04.03.2019    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Вы уничтожили символы вне метода рендеринга.

import React, { Component } from "react";
import Table from "./Table";
class App extends Component {
  state = {
    characters: [
      {
        name: "Charlie",
        job: "Janitor"
      },
      {
        name: "Mac",
        job: "Bouncer"
      },
      {
        name: "Dee",
        job: "Aspring actress"
      },
      {
        name: "Dennis",
        job: "Bartender"
      }
    ]
  };
  removeCharacter = index => {
    const { characters } = this.state;

    this.setState({
      characters: characters.filter((character, i) => {
        return i !== index;
      })
    });
  };
  render() {
    const { characters } = this.state;
    return (
      <React.Fragment>
        <div className="App">
          <h1>Hello, React!</h1>
        </div>

        <div className="container">
          <Table
            characterData={characters}
            removeCharacter={this.removeCharacter}
          />
        </div>
      </React.Fragment>
    );
  }
}

export default App;
person Nagesh Dhope    schedule 04.03.2019
comment
почему это не легально? - person Alitaras; 04.03.2019
comment
вы не можете использовать уничтожение { } на уровне класса. - person Nagesh Dhope; 04.03.2019
comment
ах хорошо спасибо! но почему я не могу объявить переменную с помощью const, let или var, но когда я объявляю переменную только с использованием имени переменной, например x = 1; является действительным? вышеуказанные объявления находятся на уровне класса - person Alitaras; 04.03.2019