Question

我正在练习使用react构建一个简单的表。这里我的桌子有三列。（名称，职务，删除）。表中已经有一些数据。在第三列中，我要构建一个按钮，以便用户可以单击并取消整行

我已经修复了几个错误，但是表格仍然没有显示

const TableBody = props => { 
    const rows = props.fillTheData.map((row, index) => {
        return (
            <tr key={index}>
                <td>{row.name}</td>
                <td>{row.job}</td>
                <td><button onClick={() => props.removeCharacter(index)}>Delete</button></td>
            </tr>
        );
    });

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

class App extends React.Component {
  render() {
    const state = {
      character : [
              {
                  'name': 'Charlie',
                  'job': 'Janitor'
              },
              {
                  'name': 'Mac',
                  'job': 'Bouncer'
              },
              {
                  'name': 'Dee',
                  'job': 'Aspring actress'
              },
              {
                  'name': 'Dennis',
                  'job': 'Bartender'
              }
      ]
    }

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

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

    return(

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

    )
  }
}

class Table extends React.Component {
  render(){
    const {characters, removeCharacter} = this.props;
    return(
      <table>
        <TableHeader />
        <TableBody fillTheData = {characters} removeCharacter= {removeCharacter} />
      </table>
    )
  }
}

现在，我们有一个很棒的Table组件，但是数据正在被硬编码。关于React的重要问题之一是它如何处理数据，它使用属性（称为props）和状态来处理数据。首先，我们将专注于使用道具处理数据。

然后将所有数据移动到对象数组中，就像我们引入基于JSON的API一样。我们必须在render（）中创建此数组。

Answer 1

似乎您没有渲染App组件。为此，您需要从reactDOM库导入render方法。因此，在文件的顶部，您将得到以下内容：

import React from 'react'; import ReactDOM from 'react-dom';

在文件末尾，您将使用以下方式呈现App实例： ReactDOM.render(nodeWhereYouWillMount,<App />)

Answer 2

看起来您的state是局部变量，而不是App组件的持久数据。尝试这样的事情：

class App extends React.Component {
    state = {
        character : [
            {
                'name': 'Charlie',
                'job': 'Janitor'
            },
            {
                'name': 'Mac',
                'job': 'Bouncer'
            },
            {
                'name': 'Dee',
                'job': 'Aspring actress'
            },
            {
                'name': 'Dennis',
                'job': 'Bartender'
            }
        ]
    };

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

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

    render() {
        return(
            <Table characters = {this.state.character} removeCharacter = {this.removeCharacter} />
        )
    }
}

请注意，我们已经在render（）方法之外定义了state={character: [...]};，后来又使用characters = {this.state.character}来读回它。现在，当调用removeCharacter（）方法时，它将更改render（）方法之外的数据。

我的反应班有什么问题吗？

2 个答案: