Wie ajax löschen auf reagieren

Question

Ich frage mich, ob Löschen funktioniert wie hinzufügen, aber es tut nicht. Im mit Methode holen Im nicht vertraut auf reagieren Ajax so bin ich nicht klar, dass was falsch mit meinem Code

so hier ist mein Code löschen Onclick

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 :(
    }); 
} 

Dies ist der Code für die Tabelle

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

Code für den Aufruf der Daten, bei denen die Taste

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 zu finden: der Code selbst funktioniert, so dass die Konsole sagt nichts falsch ist, aber ich will es, wenn ich es die Reloads Tabelle klicken

Answer 1

Schritt 1 - Sie müssen Index in Ihrer Funktion aufzurufen deleteEmployee(id,index)

Schritt 2 - Anruf Splice Verfahren nach Anfrage Ende

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 /////

auch die shouldnt c render Alles als Funktion. Sie können wie die

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

verwenden und dann

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

Sie binden in Konstruktor

constructor(props) { 
     super(props) 

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

Answer 2

Es sieht aus wie Sie speichern Ihre Liste der Mitarbeiter in this.state.jsonReturnedValue aufrufen können. In Ihrer deleteEmployee Funktion erstellen Sie eine Kopie des Arrays, aber ändern Sie keine der Werte. Vermutlich möchten Sie die Zeile für den Mitarbeiter löschen, der vor dem Aufruf von this.setState mit dem aktualisierten Array gelöscht wurde.