时间戳

首页 > 解决方案 > 在组件类内部和渲染函数外部声明变量以在渲染函数中使用它时出错

reactjs - 在组件类内部和渲染函数外部声明变量以在渲染函数中使用它时出错

问题描述

在下面的代码中，当我通过解构声明可变字符时

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;

这里是一个沙箱的代码：sandbox with the error，查看app.js文件

当我将声明放在渲染函数中时没有问题，请查看正确的代码沙箱。

此外，当我在（App.js 文件的）渲染函数之外创建一个变量时，没有 const 或 let 例如：

x=1;

当我在渲染函数中将它用作 this.x 时，它工作正常，但是当我使用 let、const 或 var 声明它时，它会抛出一个 Unexpected token 错误。

你如何解释这种行为？

标签： reactjsclassvariablesrender

解决方案

您在渲染方法之外破坏了字符。

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;

推荐阅读