此应用程序显示一个阵列中的三个用户。现在,我试图通过其点击按钮删除每个用户。
为此,我引用了在stackoverflow上找到的解决方案 Stackoverflow link
这是我的问题:
当我单击用户1删除它时,它将删除用户2而不是用户1,如果仅剩下用户1。如果我点击它的按钮, 它不会被删除。
这是代码
import React, { Component, Fragment } from "react";
import { render } from "react-dom";
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
data: []
};
}
componentDidMount() {
this.setState({
data: [
{ id: "1", name: "user 1" },
{ id: "2", name: "user 2"},
{ id: "3", name: "user 3"}
]
});
this.handleDeleteRow = this.handleDeleteRow.bind(this);
}
handleDeleteRow = (pid) => {
alert(pid);
let data = [...this.state.data];
data.splice(pid, 1);
this.setState({
data: data
})
}
render() {
return (
<span>
<label>
<ul>
{this.state.data.map(person => (
<li key={person.id}>
{person.name}
<br />
<button onClick={() => this.handleDeleteRow(person.id)} style={{color:'red'}}>Delete</button>
</li>
))}
</ul>
</label>
</span>
);
}
}
答案 0 :(得分:0)
您将pid
用作索引(在data.splice(pid, 1)
中),但这实际上是一个ID。因此,例如,当您单击以删除第一项时,您正在调用this.handleDeleteRow("1")
,但是1是数组的第二个索引,因此它是被删除的第二项。
尝试一下:
data.splice(data.findIndex(({ id }) => id === pid), 1);