Reactjs 删除动态添加的表行-react js

我正在将表行动态添加到表中。以下是它在UI中的外观：

<td><Button onClick={(event) => this.removeRow(event, item)}>Delete</Button></td>

<td><Button onClick={(event) => this.removeRow(event, item)}>Delete</Button></td>

以下是我用来创建新行的逻辑：

<td><Button onClick={(event) => this.removeRow(event, item)}>Delete</Button></td>

我有一个状态变量

this.state=（{rows:[]}）

<td><Button onClick={(event) => this.removeRow(event, item)}>Delete</Button></td>

在“插入”按钮上，单击我正在执行的操作：

addNewRow = () => {
        this.setState({rows: this.state.rows.concat([{}])});
    }

<td><Button onClick={(event) => this.removeRow(event, item)}>Delete</Button></td>

在我的

render（）

中，我有以下代码：

const rows = this.state.rows.map((item, id) => {
            return(
                <tr key={id}>
                    <td>Something</td>
                    <td>Something</td>
                    <td>Something</td>
                    <td>Something</td>
                    <td><Button onClick={(event) => this.removeRow(event, id)}>Delete</Button></td>
                </tr>
            );
        });

<td><Button onClick={(event) => this.removeRow(event, item)}>Delete</Button></td>

整个代码工作正常。我已经更改了变量名并从中删除了不需要的代码，但这是为了让您了解我是如何设计它的

<td><Button onClick={(event) => this.removeRow(event, item)}>Delete</Button></td>

我的问题是，当我单击“删除”按钮时，它总是删除行中的最后一个项目，而不是我单击的项目行。如何解决这个问题

<td><Button onClick={(event) => this.removeRow(event, item)}>Delete</Button></td>

我在谷歌上搜索了同样的例子，发现很少有例子，老实说，我觉得它们很复杂，所以我决定走自己的路

<td><Button onClick={(event) => this.removeRow(event, item)}>Delete</Button></td>

---

请告知需要采取什么措施来解决此问题。

切勿在React:中直接改变状态

<td><Button onClick={(event) => this.removeRow(event, item)}>Delete</Button></td>

您需要这样做：

removeRow=(event,id)=>{  
  var array = [...this.state.rows]; // make a new copy of array instead of mutating the same array directly. 
  var index = array.findIndex(x => x.id===id); //find the index of item which matches the id passed to the function
  array.splice(index, 1);
  this.setState({people: array});
  }

<td><Button onClick={(event) => this.removeRow(event, item)}>Delete</Button></td>

---

这是因为您使用数组索引作为

元素的键

<td><Button onClick={(event) => this.removeRow(event, item)}>Delete</Button></td>

React使用

键

标识要插入的内容或从现有DOM树中删除的内容

<td><Button onClick={(event) => this.removeRow(event, item)}>Delete</Button></td>

请使用任何其他唯一标识符，例如，

Date.now（）

作为键，并将此键保存为

行

状态的一部分

addNewRow = () => {
  const { rows } = this.state
  this.setState({
    rows: [
      ...rows,
      {
        id: Date.now(),
      },
    ],
  })
}

render() {
   const rows = this.state.rows.map((item, index) => (
     <tr key={item.id}>
     </tr>
   ))
}

<td><Button onClick={(event) => this.removeRow(event, item)}>Delete</Button></td>

addNewRow=（）=>{
const{rows}=this.state
这是我的国家({
行：[
…行，
{
id:Date.now（），
},
],
})
}
render（）{
const rows=this.state.rows.map（（项目，索引）=>(
))
}

这是因为您使用的

.map（）

错误

<td><Button onClick={(event) => this.removeRow(event, item)}>Delete</Button></td>

您需要像下面这样传递

项

：

<td><Button onClick={(event) => this.removeRow(event, item)}>Delete</Button></td>

---

谢谢。但这仍然不能解决我的问题。它仍然是最后一行而不是当前单击的行。我已经编辑了我的答案。问题可能在于查找项的索引。看，我改变了查找索引的逻辑，我改变了。发现indexOf导致了第一个问题，这是一个很好的发现。你是对的。我代码中的那一行总是返回-1。您使用findIndex的代码非常完美。它发现索引很好，但最后react删除了最后添加的元素：（你能将你的最小代码添加到沙盒中吗？这将很容易找到实际问题。谢谢。你能给我看一个示例设置

Date.now（）

将其保存到

行的一部分

。我不知道应该在哪里执行，以及我的removeRow函数将有哪些更改。您在

removeRow

中使用

项

做什么，以及从何处获取

id

项？项正在传递。OP希望找到的索引。有意义。但st将删除最后一个项目，而不是单击的项目。您将其记录在哪里？您是否尝试了我编辑的答案？