React.js中CRUD更新操作不生效，后端正常无控制台报错求助

问题根因排查 #

• 1. setState层级错误：你初始化的车辆相关字段都存在state.car这个嵌套对象下，但你在updateCar的setState操作里直接把idCars、carName等字段写到了state根层级，完全没有更新state.car对象，这是最核心的问题。
• 2. 可选检查：确认调用DataService.update前this.state.car.idCars不是null，你初始化的时候idCars是null，如果没有在编辑页给这个字段赋值，传null给后端自然不会匹配到要更新的记录。

修复代码 #

首先修改updateCar里的setState逻辑：

updateCar() {
  // 可加该行日志排查id是否正常，避免传空id调用接口
  console.log("当前要更新的车辆ID：", this.state.car.idCars)
  DataService.update(this.state.car.idCars,this.state.car)
    .then(response => {
      console.log(response.data);
      this.setState({
        // 正确更新嵌套的car对象
        car: {
          ...this.state.car,
          idCars: response.data.idCars,
          carName: response.data.carName,
          carModel: response.data.carModel,
        },
        submitted: true
      });
      this.props.history.push('/classement')  
    })
    .catch(e => {
      console.log(e);
    });
}

如果当前页面是编辑已有车辆的场景，还要确认进入页面时有没有把选中项的字段赋值给state.car，路由传参场景的参考代码如下：

componentDidMount() {
  // 假设从路由参数拿到要编辑的车辆id
  const carId = this.props.match.params.id
  // 调用接口获取车辆详情赋值给state.car
  DataService.get(carId).then(res => {
    this.setState({
      car: res.data
    })
  })
}

另外你已经在constructor里给updateCar绑定过this了，按钮的点击事件可以简化，没必要额外包一层箭头函数：

<button onClick={this.updateCar} className="btn btn-success" style={{marginLeft:'35%'}}>
  Submit
</button>

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