React 渲染缺少分号答案

【问题标题】：React render is missing semicolonReact 渲染缺少分号
【发布时间】：2021-07-26 17:14:05
【问题描述】：

您能否解释一下为什么我在不需要在其中包含分号时收到此错误？

编译失败。

./src/App.js 语法错误：/Users/admin/react-tutorialmike/src/App.js：缺少分号 (38:8)

36 | } 37 |

38 |使成为（） { | ^ 39 |常量 { 字符 } = this.state 40 |
41 |返回（

import React, {Component} from 'react'
import Table from './table'


class App extends Component {
    state = {
      characters: [
        {
            name: 'Jan',
            job: 'Kucharz',
          },
          {
            name: 'Maciek',
            job: 'Rolnik',
          },
          {
            name: 'Dawid',
            job: 'Designer',
          },
          {
            name: 'Dennis',
            job: 'CEO',
          },
      ],
    }
};

removeCharacter = index => {
    const { characters } = this.state;

    this.setState({
        characters: characters.filter((character, i) => { 
            return i !== index;
        })
    })
}

render() {
    const { characters } = this.state
  
    return (
      <div className="container">
        <Table characterData={characters} removeCharacter={this.removeCharacter} />
      </div>
    )
  }

export default App

【问题讨论】：

React 或 JavaScript 不需要它，但项目中使用的 linter （可能）需要它。您是否偶然使用 ESLint？
如果这是一个新项目，我建议使用带有钩子的功能组件，而不是基于类的组件。

标签： reactjs

【解决方案1】：

render 需要在 class 内，removeCharacter 也是如此（假设您使用的是 this）。您似乎还缺少围绕您的状态设置的 constructor 包装器。

class App extends Component {
  constructor() {
    this.state = {
      characters: [
        {
            name: 'Jan',
            job: 'Kucharz',
          },
          {
            name: 'Maciek',
            job: 'Rolnik',
          },
          {
            name: 'Dawid',
            job: 'Designer',
          },
          {
            name: 'Dennis',
            job: 'CEO',
          },
      ],
    };
  }

  removeCharacter(index): {
    const { characters } = this.state;

    this.setState({
        characters: characters.filter((character, i) => { 
            return i !== index;
        })
    });
  }

  render() {
    const { characters } = this.state;
  
    return (
      <div className="container">
        <Table characterData={characters} removeCharacter={this.removeCharacter} />
      </div>
    );
  }
}

export default App;

【讨论】：