Question

我是Web开发的新手，我正在尝试学习React。我一直在遵循的教程中停留在某一点，似乎无法通过。我正在尝试在state中存储一些数据。但是，当我尝试引用它时，出现错误'Line 45：'characters' is not defined no-undef'。我尝试了一些修复程序，但似乎都无法正常工作。这是我的代码：

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

class App extends Component {
    constructor(props) {
        super(props);
        this.state = {
            characters: [
                {
                    'name': 'Charlie',
                    'job': 'Janitor',
                    'specialskill': 'Rat Bash'
                },
                {
                    'name': 'Mac',
                    'job': 'Body Guard',
                    'specialskill': 'Occular Pat-Down'
                },
                {
                    'name': 'Dee',
                    'job': 'Aspring actress',
                    'specialskill': 'Essence of Bird'
                },
                {
                    'name': 'Dennis',
                    'job': 'Bartender',
                    'specialskill': 'The Implication'
                },
                {
                    'name': 'Frank (But Not Really)',
                    'job': 'Duper',
                    'specialskill': 'Egg of Trying Times'
                }
            ]
        };
    }

    render() {  
        return (
            <div className="container">
                <h1>The Gang</h1>
                <body>
                    <Table 
                        characterData={characters}
                        removeCharacter={this.removeCharacter}
                    /><
                /body>
                <body><WhatDoNow /></body>
            </div>
        );
    }

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

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



export default App;

这是Table类。

import React, {Component} from 'react';

class Table extends Component {
    render() {
        const { characterData } = this.props;

        return (
            <table>
                <TableHeader />
                <TableBody characterData={characterData} />
            </table>
        );
    }
}

const TableHeader = () => { 
    return (
        <thead>
            <tr>
                <th>Name</th>
                <th>Job</th>
                <th>Special Skills</th>
            </tr>
        </thead>
    );
}

const TableBody = (props) => { 

    const rows = props.characterData.map((row, index) => {
        return (
            <tr key={index}>
                <td>{row.name}</td>
                <td>{row.job}</td>
                <td>{row.specialskill}</td>
            </tr>
        );
    });

    return (
        <tbody>
        {rows}
        </tbody>
    );
}

export default Table;

Answer 1

将字符传递到Table时，请确保将其屁股this.state传递。所以characterData={this.state.characters}

希望有帮助。

Answer 2

我认为您使用了未声明的变量characters，因为错误提示在这里：

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

应该是

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

Answer 3

在App.js中用characterData={characters}替换characterData={this.state.characters}

状态在React中保持未定义

3 个答案: