React中使用Axios按ID删除车辆数据无效果，如何解决？

核心问题定位 #

• 问题1：this.state.cars是数组类型，直接访问this.state.cars.idCars得到的是undefined，传给删除接口的ID无效，后端无法定位要删除的数据，所以返回空数组且没有执行删除操作
• 问题2：删除按钮点击事件没有绑定当前行对应的车辆ID，无法确定用户要删除哪条数据
• 问题3：删除成功后先执行了路由跳转，后续的列表刷新逻辑不会在原页面生效

具体修复代码 #

1. 修正删除按钮的点击事件，传入当前车辆ID #

修改render方法内的按钮逻辑：

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

2. 改造deleteC方法，接收传入的ID作为参数 #

deleteC(targetId) {    
  DataService.delete(targetId)
    .then(response => {
      // 先刷新列表，再跳转路由
      this.refreshList();
      this.props.history.push('/Classement');
    })
    .catch(e => {
      console.log(e);
    });
}

可选优化：无需跳转可直接更新当前页列表 #

如果删除后不需要跳转到其他页面，可以直接在前端过滤已删除数据，减少接口请求：

deleteC(targetId) {    
  DataService.delete(targetId)
    .then(response => {
      this.setState({
        cars: this.state.cars.filter(item => item.idCars !== targetId)
      })
    })
    .catch(e => {
      console.log(e);
    });
}

额外排查点 #

如果修改后仍有问题，可以先在deleteC方法开头打印targetId，确认ID是否正确传递；再检查后端删除接口的路径、请求方式是否和前端调用逻辑匹配，是否要求额外的请求头/参数。
如果你的get/${id}接口返回的是单个车辆对象而非数组，还需要修改getCar内的setState逻辑，避免数组map报错：

this.setState({
  cars: [response.data]
});

内容的提问来源于stack exchange，提问作者user14407372