React带参数函数的setState延迟问题解决方案合理性咨询

核心问题 #

你原代码里的setFormData是异步执行的，调用后马上访问formData拿到的还是旧值，所以传给edit_appointment的并不是更新后的状态数据，这就是你遇到的延迟问题根源。

你的临时写法存在的问题 #

你写的这段Workaround并不规范，有两个明显问题：

1. 直接修改原状态对象：let data = formData; data.in_status = 'true'这里，data和formData是同一个引用，直接修改它违反了React状态不可变的原则，会导致组件无法正确感知状态变化，可能引发渲染异常或者数据不一致的问题。
2. 逻辑冗余混乱：你既用扩展运算符创建新对象更新状态，又直接修改旧状态对象，完全没必要，反而会让状态管理逻辑变得混乱。

规范的正确写法 #

根本不需要依赖setState的异步结果，我们可以先创建好更新后的完整数据对象，同时用它来更新状态和调用接口：

const update_intime = (id, name) => {
  // 先构建更新后的新数据对象
  const updatedFormData = { ...formData, in_status: 'true' };
  
  // 更新组件状态
  setFormData(updatedFormData);

  swal({
    title: '确定吗？',
    text: `你要确认预约患者${name}的签到操作！`,
    icon: 'warning',
    buttons: ['取消', '确认'],
    dangerMode: true,
  }).then(function (isConfirm) {
    if (isConfirm) {
      // 直接传入已经准备好的更新后数据
      edit_appointment(id, updatedFormData, navigate, 'checkin');
    }
  });
};

这种写法的优势：

• 严格遵循React状态不可变的规则，通过扩展运算符创建新对象，不修改原状态
• 不需要等待setState的异步更新，直接使用提前构建好的新数据，彻底解决异步延迟问题
• 逻辑清晰统一，状态更新和接口调用用的是同一套数据，不会出现数据不一致的情况

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