ReactJs如何从表中删除一行？

Question

我正在使用 reactsjs。我有一个基于按钮单击添加行的表。这些行也被添加到行数组中。添加该行时，其中有一个按钮，单击该按钮将删除该行。这是我开始工作所需要的。行存储在数组中，就像在数组中一样。我通过查看示例进行了尝试。通过我的尝试，正在删除不正确的行。

这是我尝试过的代码：

constructor() {
    super();
    this.state = {
      tasks: []
    }
    this.handleDeleteRow = this.handleDeleteRow.bind(this);
  }

handleDeleteRow(i) {
    let rows = [...this.state.rows]
    rows.splice(i, 1)
    this.setState({ 
      rows: rows
    })
  }

一段代码：

<tbody>
{rows.map((row,i) => {
                return(
                    <tr key={i}>
                        <td scope="row" >{i}</td>
                        <td>{row.ex}</td>
                        <td>{row.ex}</td>
                        <td>{row.ex}</td>
                        <td>{row.ex}</td>
                        <td>{row.ex}</td>
                        <td>
                            this is the delete button
                        </td>
                    </tr>
                );
            })}
</tbody>

Answer 1

答案取决于您如何调用handleDeleteRow。

从您的评论中，您提到这是您的电话：

<a onClick={this.props.handleDeleteTask.bind(this)} > delete row </a>

试试这个：

<a onClick={i => this.handleDeleteRow(i)}>Delete Row</a>

但您必须确保始终使用相同的变量名。在原始代码 sn-p 中定义state.tasks，然后在删除函数中设置state.rows，在渲染函数中交替调用map rows（为此我只能假设您正在解构它像{rows} = this.state 这样的状态变量，但随后您调用了一个您尚未定义（至少对我们而言）的函数，称为handleDeleteTask。

如果您想看到这项工作，您必须始终一丝不苟地保持一致。

Answer 2

我认为问题出在钥匙上。当您有一个数组 [a, b, c] 并删除 a 时，在新数组 [b, c] 中，键对应于错误的项目。请为您的桌子找到更好的钥匙。