React - 如何从 table 中删除项目

Question

我想从我的汽车中删除一个项目 table 所以我得到了汽车的 id 但是当我将它传递给 onClick 那就是循环并且 returns id 未定义我不知道为什么即使逻辑正确也能工作

有人可以帮我解决这个问题吗？

这是我的代码：

CarComponent.jsx :

 constructor(props) {
      super(props);
      this.deleteC = this.deleteC.bind(this);
      this.state = {
        idCars: null,
        carName: "",
        carModel: "", 
        cars: [],
        submitted: false
      };

       deleteC(idCars) {   
          DataService.delete(this.idCars)
            .then(response => {
              
              this.props.history.push('/Classement');
            
            })
            .catch(e => {
              console.log(e);
            });
        }
render() {
      const { cars } = this.state;
              return (
            <div >
<tbody>
                    {cars &&
                      cars.map(data => (
                        <tr >
                        
                        <th scope="row">{data.idCars}</th>  
                      
                      <td>{data.carName}</td>
                      <td>{data.carModel}</td>
                      <td>
                      <Link to={"/update/" + data.idCars}
                        className="btn btn-info"
                        >
                        Edit
                       </Link>
                    {data.idCars}
                      <button  className="btn btn-danger"  onClick={this.deleteC(data.idCars)}>
                        Remove
                      </button>
                        </td>

我在控制台中得到的结果是：

错误循环&不要停止

Answer 1

您需要对代码进行少量更改，

您的 onClick 处理程序需要是一个内联函数，

  <button  className="btn btn-danger"  onClick={() => this.deleteC(data.idCars)}>
     Remove
  </button>

您需要使用参数 idCars ，删除 this

deleteC(idCars) {
  DataService.delete(idCars)
    .then((response) => {
      this.props.history.push("/Classement");
    })
    .catch((e) => {
      console.log(e);
    });
}

React - 如何从 table 中删除项目

React - how to delete an item from table

http

crud

reactjs

axios