Javascript 如何在reactjs中通过onclick删除fetch上的行
我对此很陌生,我不知道如何使用fetch删除行。。我已经做了一个乱七八糟的代码,我不知道它将如何工作,现在请帮助我,我很迷路Javascript 如何在reactjs中通过onclick删除fetch上的行,javascript,reactjs,web,Javascript,Reactjs,Web,我对此很陌生,我不知道如何使用fetch删除行。。我已经做了一个乱七八糟的代码,我不知道它将如何工作,现在请帮助我,我很迷路 renderItem(d, i) { return <tr key={i} > <td> {d.Employee_ID} </td> <td>{d.Employee_Name}</td> <td>{d.Address }</
renderItem(d, i) {
return <tr key={i} >
<td> {d.Employee_ID} </td>
<td>{d.Employee_Name}</td>
<td>{d.Address }</td>
<td><center><button className ="btn btn-info" onClick={this.handleOnclick.bind(this, d.Employee_ID, d.Employee_Name, d.Address)} data-toggle="modal" data-target="#UpdateEmployee">Edit</button></center></td>
<td><center><button className ="btn btn-danger" onClick={this.deleteEmployee.bind(this, d.Employee_ID)}>Delete</button></center></td>
</tr>
}
handleOnclick(id,name,address) {
this.setState({
Employee_Name: name,
Address: address,
});
}
deleteEmployee(id) {
debugger
fetch ('http://localhost:5118/api/employeedetails/deleteemployeedetail/'+ id,
{ method: 'DELETE',})
.then(
res => this.setState({jsonReturnedValue : json})
)
.catch( err => cosole.error(err))
}
renderItem(d,i){
返回
{d.Employee_ID}
{d.Employee_Name}
{d.Address}
编辑
删除
}
handleOnclick(id、姓名、地址){
这是我的国家({
员工姓名:姓名,
地址:地址:,
});
}
删除员工(id){
调试器
取('http://localhost:5118/api/employeedetails/deleteemployeedetail/“+id,
{方法:'删除',})
。然后(
res=>this.setState({jsonReturnedValue:json})
)
.catch(err=>cosole.error(err))
}
从api中删除元素后,您还需要将其从状态中删除,假设您正在从状态employee
呈现表。那么你需要做什么
deleteEmployee(id) {
debugger
fetch ('http://localhost:5118/api/employeedetails/deleteemployeedetail/'+ id,
{ method: 'DELETE',})
.then(
res => {
this.setState({jsonReturnedValue : json})
var employee = [...this.state.employee];
var idx = employee.findIndex(item => item.Employee_ID === id);
employee.splice(idx, 1);
this.setState({employee})
}
)
.catch( err => cosole.error(err))
}
@thinhvo0108嗯,你能帮我一下吗?你面临的问题是什么?是删除然后重新加载没有发生,还是后端也没有删除。如果您的renderItem只有一行,您是否映射并调用此函数。它是如何工作的,你能给更多吗details@ShubhamKhatri我对渲染部分很在行我的问题是删除我不能在单击按钮时删除一行你不理解我的问题,当你单击删除按钮时,你的获取调用是否给你一个错误,那么你能为api添加代码吗,
api/employeedetails/deleteemployeedetail
或者如果fetch调用正确返回,那么您需要在您的状态下更新它。当我链接它时,它在api上工作,但在react上不工作……它有点工作,但它说:5118/api/employeedetails/deleteemployeedetail/18加载资源失败:服务器以405状态响应(方法不允许)这不是你的错,我只是迷路了,我不知道我在做什么--:/你能确保你的删除api工作正常吗^^?啊,下次,当你键入@thinhvo0108时,如果我还没有参加讨论,我就无法收到,所以请用另一种方式打电话给我,谢谢如果你的api仍然不工作,你可以问一个单独的问题。你能接受吗这是一个答案,如果它有帮助的话