时间戳

首页 > 解决方案 > 未定义的变量反应教程

javascript - 未定义的变量反应教程

问题描述

我正在尝试学习 Tania Rascia React 教程。我遇到了一个出现几个错误的地方。他们的解决方案似乎很明显，但是如果我缺少某些东西，我会感到困惑，因为这正是教程代码的确切方式。这个教程是react官方认可的，这也是我莫名其妙的原因。难道我做错了什么？还是教程错了？

以下是错误：

第 7 行：“state”未定义 no-undef 第 27 行：“removeCharacter”未定义 no-undef 第 39 行：“characters”未定义 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;

标签： javascriptreactjs

解决方案

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

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;

推荐阅读