javascript - undefined variable react 教程

Question

我正在学习 Tania Rascia React 教程，试图学习。我遇到了出现几个错误的情况。他们的解决方案似乎很明显，但我只是很困惑是否缺少某些东西，因为这正是教程代码的方式。本教程得到了 React 的官方认可，这就是我感到困惑的原因。难道我做错了什么？还是教程错了？

错误如下:

第 7 行:“state”未定义 no-undef 第 27 行:'removeCharacter' 未定义 no-undef 第 39 行:“字符”未定义 no-undef

这是代码:

 //  eslint-disable-next-line
import React, { Component } from 'react';
import Table from './Table.js';

class App extends Component {
    render(){
        state = {
            characters:[
                            {
                'name': 'Charlie',
                'job': 'Janitor'
            },
            {
                'name': 'Mac',
                'job': 'Bouncer'
            },
            {
                'name': 'Dee',
                'job': 'Aspiring Actress'
            },
            {
                'name': 'Dennis',
                'job': 'Bartender'
            }
            ]
        };
    removeCharacter = index => {
        const { characters } = this.state;

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

        return (
            <div className="container">
                <Table characterData={characters} />
            </div>
        );
    }
}

export default App;

Answer 1

你似乎缺乏基本的 React 概念，请阅读 react documentation以及您的视频教程。

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

class App extends Component {
     state = {
            characters:[
                            {
                'name': 'Charlie',
                'job': 'Janitor'
            },
            {
                'name': 'Mac',
                'job': 'Bouncer'
            },
            {
                'name': 'Dee',
                'job': 'Aspiring 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 (
            <div className="container">
                <Table characterData={characters} />
            </div>
        );
    }
}

export default App;