Question

我正在通过Tania Rascia React教程进行学习。我碰到出现几个错误的地方。他们的解决方案似乎很明显，但是如果缺少我，我会感到困惑，因为这是教程代码的确切方法。这个教程得到了react的正式认可，这就是为什么我感到困惑的原因。难道我做错了什么？还是教程有误？

以下是错误：

第7行：未定义“状态” 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。

FunctionApp

Answer 2

您的代码放错了位置。

return位于render内部，而state和handlers位于渲染外部。

更正的代码：

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(){
         return (
            <div className="container">
                <Table characterData={characters} />
            </div>
        );
    }


    }
}

export default App;

Answer 3

state和removeCharacter必须在您的渲染函数之外

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() {
        return (
            <div className="container">
                <Table characterData={characters} />
            </div>
        );
    }
}

export default App;

Answer 4

@masmerino提供了正确的答案。但是对于可能查看此帖子的任何人，仅在更改后即可解决第39行的错误

 <Table characterData={characters} />

对此：

 <Table characterData={this.state.characters} />

Answer 5

我目前正在关注同一个 Tania 教程，它给了我一个错误，即 removeCharacter 未声明，这是因为我是在 RENDER 之后编写的。这是没有错误的代码

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((characters, i) => {
        return i !== index
      }),
    })
  }

  render(){
    const { characters } = this.state

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

export default App

未定义的变量反应教程

5 个答案: