如何通过reactjs中的onclick删除获取行 [英] How can i delete a row on fetch by onclick in reactjs

问题描述

我对此很陌生我不知道如何使用 fetch 删除一行..我已经做了一个混乱的代码我不知道它现在如何工作请帮助我我很迷茫...

I am very new to this i dont know how to delete a row by using fetch.. ive already made a messed up code i don't know how it will work now please help me im so lost...

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))                
      }  

推荐答案

从 api 中删除元素后，您还需要将其从状态中删除，假设您正在从状态 employee 渲染表.那么你需要做

After deleting your element from api you also need to remove it from your state, Suppose you are rendering your table from state employee. then you need to do

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))                
  }  

这篇关于如何通过reactjs中的onclick删除获取行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！