如何在fetch 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>
    );

}

}