Reactjs使用axios更新数据时状态不生效，后端正常无控制台报错

核心问题点 #

• 调用updateCar方法时未传必填的idCars参数：按钮点击事件触发时调用的是空参的updateCar()，导致DataService.update接收的第一个参数为undefined，后端无法识别需要更新的目标条目ID，即使后端接口逻辑正常也无法对应到指定数据。
• 方法内部重复声明data变量：方法入参的data被内部重新声明的data覆盖，属于不规范的变量声明逻辑。
• setState异步特性导致跳转时机异常：setState是异步执行方法，调用后立刻执行history.push跳转，会导致状态还未完成更新就离开当前页面，看不到更新效果。
• 前后端返回字段可能不匹配：提交给后端的主键字段为id，但setState时读取的是response.data.idCars，如果后端返回的主键字段名是id而非idCars，会导致本地idCars状态赋值为undefined，无法对应到选中条目。

修复方案 #

1. 修改按钮点击事件，传入目标条目的ID #

如果你是在条目列表的编辑页，直接把当前选中条目的ID传入方法即可：

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

2. 优化updateCar方法逻辑 #

updateCar(idCars) {
  // 移除重复的data入参，直接从state取提交数据
  const submitData = {
    id: idCars,
    carName: this.state.carName,
    carModel: this.state.carModel
  };

  DataService.update(idCars, submitData)
  .then(response => {
    // 兼容后端返回的主键字段名，可根据实际返回值调整
    this.setState({
      idCars: response.data.id || response.data.idCars,
      carName: response.data.carName,
      carModel: response.data.carModel,
      submitted: true
    }, () => {
      // 把跳转逻辑放到setState的回调里，确保状态更新完成后再跳转
      this.props.history.push('/classement')
    });
  })
  .catch(e => {
    console.log(e);
  });
}

额外排查点 #

如果修改后还是有问题，可以在DataService.update调用前加console.log(idCars, submitData)确认传参是否正确，同时在then回调里打印response.data确认后端返回的字段是否和前端读取的一致。

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