时间戳

首页 > 解决方案 > 我的反应课有问题吗？

javascript - 我的反应课有问题吗？

问题描述

我正在练习使用 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）和状态来处理数据。首先，我们将专注于使用 props 处理数据。

然后让我们将所有数据移动到一个对象数组中，就好像我们引入了一个基于 JSON 的 API。我们必须在我们的 render() 中创建这个数组。

标签： javascriptreactjsreact-fullstack

解决方案

看起来你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} />
        )
    }
}

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

推荐阅读