我怎樣才能刪除獲取reactjs行

Question

這是我從API

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

    this.setState({ 
     Employee_Name: name, 
     Address: address, 
     }); 
     } 
    } 

於是，我就刪除行使用此表但林不知道在哪裏或部分怎麼我得到錯誤請幫助我真的不知道該怎麼

onDelete(id) { 
     deleteEmployeet(id) 
      .then((data) => { 
       let jsonReturnedValue = this.state.Employee_Name.filter((post) => { 
       return id !== post.id; 
        }); 

        this.setState(state => { 
         state.Employee_Nam = Employee_Nam; 
         return state; 
        }); 
       }) 
       .catch((err) => { 
        console.error('err', err); 
       }); 
     } 
    export function deleteBlogPost(id) { 
     return fetch('http://localhost:5118/api/employeedetails/deleteemployeedetails/' + id, { 
      method: 'DELETE', 
      mode: 'CORS' 
     }).then(res => res) 
     }).catch(err => err); 
    } 

這是我使其在那裏我使我的reactjs碼的地方

render() { 

    let {jsonReturnedValue} = this.state; 

return(
    <div> 
     <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"> 

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

Answer 1

你的代碼是一個有點糊塗^^，但是現在請嘗試刪除您的onDelete()，deleteEmployeet()和export function deleteBlogPost(id)，冷靜下來，用我的想法來代替：

// ... 
handleOnclick(id,name,address) {} 

//same level as the above `handleOnclick()` function 
deleteEmployee(id) { 
     return fetch('http://localhost:5118/api/employeedetails/deleteemployeedetails/' + id, { 
      method: 'DELETE', 
      mode: 'CORS' 
     })then(resp => resp.json()) 
     .then((resp) => { 
      console.log("the list after deleting...", resp); 
      // Please use `this.setState()` with the above "resp" here to reset your employee list, 
      // I think it's gonna be the same just like when you render your employee for the first time 
     }); 

} 

因爲這是你應該做的方式，它不」還沒有工作，請告訴我你得到的錯誤，但這種接近應該是正確的，謝謝！

Answer 2

import React from 'react'; 
import 'whatwg-fetch'; 
import form from './add.jsx'; 

export default class employee extends React.Component { 


constructor() { 

    super(); 
     this.state = { jsonReturnedValue: [], 
     Employee_Name: '', 
     Employee_ID: '', 
     Address: '', 
     } 

     } 


componentDidMount() { 
    fetch('http://localhost:5118/api/employeedetails/getemployeedetails/') 
    .then((response) => { 
    return response.json()}) 
    .then((json) => { 
    this.setState({jsonReturnedValue : json}); 
    }); 
} 


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><button className ="btn btn-danger" onClick={this.deleteEmployee.bind(this, d.Employee_ID)}>Delete</button></center></td> 
</tr> 
} 

handleOnclick(id,name,address,department) { 


this.setState({ 
    Employee_Name: name, 
    Address: address, 
    Department: department, 
    }); 
    } 

deleteEmployee(id) { 

    jQuery.support.cors = true; 
    debugger 
     fetch ('http://localhost:5118/api/employeedetails/DeleteEmployeeDetail/'+ id, 
     { method: 'DELETE', 
     credentials: 'same-origin'}) 
     .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 => console.error(err)) 
    } 

render() { 

    let {jsonReturnedValue} = this.state; 

return(
    <div> 
     <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"> 

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

    {/*Updating*/} 

<div className="modal fade" id="UpdateEmployee" role="dialog"> 
     <div className="modal-dialog"> 
      <div className="modal-content"> 
       <div className="modal-header"> 
       <button type="button" className="close" data-dismiss="modal">&times;</button> 
       <h4 className="modal-title">Update Employee</h4> 
      </div> 
      <div className="container"> 
      <div className="modal-body"> 
       <table> 
       <tbody> 

       <tr> 
       <td>Name</td> 
       <td> 
       <input type="text" 
         value={this.state.Employee_Name} 
         name="Employee_Name" 
         /> 
       </td> 
       </tr> 
       <tr> 
       <td>Address</td> 
       <td> 
       <input type="text" 
         value={this.state.Address} 
         name="Address" 
         /> 
       </td> 
       </tr> 
       <tr> 
       <td>Address</td> 
       <td> 
       <input type="text" 
         value={this.state.Address} 
         name="Address" 
         /> 
       </td> 
       </tr> 
       </tbody> 
       </table> 
      </div> 
      </div> 
      <div className="modal-footer"> 
       <botton className="btn btn-info"> Update Employee</botton> 
       <button type="button" className="btn btn-default" data-dismiss="modal">Close</button> 
      </div> 
      </div> 
     </div> 
     </div> 


    {/*Adding*/} 
     <div className="modal fade" id="AddEmployee" role="dialog"> 
     <div className="modal-dialog"> 
      <div className="modal-content"> 
       <div className="modal-header"> 
       <button type="button" className="close" data-dismiss="modal">&times;</button> 
       <h4 className="modal-title">Add New Employee</h4> 
       </div> 
      <div className="container"> 
      <div className="modal-body"> 
       <table> 
       <tbody> 
       <tr> 
       <td>Name</td> 
       <td> 
       <input type="text" 
         name={this.props.Employee_Name} 
         className="EmployeeDetails" 
         value={this.props.value} 
         onChange={this.props.handleChange}/> 
       </td> 
       </tr> 
       <tr> 
       <td>Address</td> 
       <td> 
       <input type="text" 
         name={this.props.address} 
         className="EmployeeDetails" 
         value={this.props.value} 
         onChange={this.props.handleChange}/> 
       </td> 
       </tr> 
       <tr> 
       <td>Department</td> 
       <td> 
       <input type="text" 
         name={this.props.address} 
         className="EmployeeDetails" 
         value={this.props.value} 
         onChange={this.props.handleChange}/> 
       </td> 
       </tr> 
       </tbody> 
       </table> 

      </div> 
      </div> 
      <div className="modal-footer"> 
       <botton className="btn btn-info" onClick = {this.save}> Add Employee</botton> 
       <button type="button" className="btn btn-default" data-dismiss="modal">Close</button> 
      </div> 
      </div> 
     </div> 
     </div> 

</div> 
    ); 

} 

}