Question

我想知道删除是否像添加一样工作，但事实并非如此。我使用fetch方法我不熟悉react的ajax所以我不清楚我的代码是什么错误

所以这是我的代码onclick delete

deleteEmployee(id) {
  jQuery.support.cors = true;
    fetch('http://localhost:5118/api/employeedetails/DeleteEmployeeDetail/'+ id, {
         method: 'GET'
  }).then(function(response) {
     // history.go(0);
      var jsonReturnedValue = [...this.state.jsonReturnedValue]; 
      this.setState({jsonReturnedValue})
  }).catch(function(err) {
    // Error :(
  });
}

这是表格的代码

< div className="container">   
          <h1> Listof Employees </h1>
            <button className ='btn btn-warning right ' data-toggle="modal" data-target="#AddEmployee"> Add an Employee</button>
             <table className= "table table-bordered" id="result"> 
                <tbody>
                 <tr>
                      <th>ID</th>
                      <th>Name</th>
                      <th>Address</th>
                      <th>Update</th>
                      <th>Delete</th>
                 </tr>
                    {jsonReturnedValue.map((d,i) => this.renderItem(d,i))}
                </tbody>

            </table>
          </div>

用于调用按钮所在的数据的代码

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 , d.Department)}   data-toggle="modal" data-target="#UpdateEmployee">Edit</button></center></td>
    <td><center><input type="submit" className ="btn btn-danger" onClick={this.deleteEmployee.bind(this,  d.Employee_ID)}  value="Delete"/></center></td>
 </tr>
}

PS：代码本身正在工作，所以控制台说什么都没有错，但我想要它，当我点击它重新加载表

Answer 1

第1步 - 您需要在函数deleteEmployee(id,index)
中调用index
步骤2 - 请求结束后调用Splice方法

  deleteEmployee(id, index) {
      jQuery.support.cors = true;
        fetch('http://localhost:5118/api/employeedetails/DeleteEmployeeDetail/'+ id, {
             method: 'GET'
      }).then(function(response) {
         // history.go(0);
          var jsonReturnedValue = [...this.state.jsonReturnedValue]; 
          this.setState({jsonReturnedValue})
      }).catch(function(err) {
        // Error :(
      });

   **this.state.jsonReturnedValue.splice(index, 1)**
///You can call as empty        
      this.setState({})

    }

EDIT /////

此外，渲染不应该作为函数调用。你可以这样使用

     {jsonReturnedValue.map((d,i) => <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 , d.Department)}   data-toggle="modal" data-target="#UpdateEmployee">Edit</button></center></td>
    <td><center><input type="submit" className ="btn btn-danger" onClick={this.deleteEmployee.bind(this,  d.Employee_ID)}  value="Delete"/></center></td>
 </tr>)}

然后

onClick={this.deleteEmployee.(d.Employee_ID, i)}

你可以在构造函数中调用bind

 constructor(props) {
        super(props)

        this.state = {
           example: ""
        }
        this.deleteEmployee = this.deleteEmployee.bind(this)
    }

Answer 2

您好像在this.state.jsonReturnedValue存储了员工列表。在deleteEmployee函数中，您可以复制数组，但不要更改任何值。据推测，您希望在使用更新的数组调用this.setState之前删除已删除的员工的行。

怎么办ajax删除反应

2 个答案: