Promise/Async Await场景下setDeviceTimeout执行顺序异常问题求助

你已经精准定位到问题核心了——map是同步执行的方法，它不会等待内部的异步Promise（也就是deviceTable.oncePostDevice）完成，所以当你调用onSetDevices(newDeviceList)时，那个需要更新的设备还没被异步请求的结果修改，自然状态更新就不符合预期了。

修正思路 #

我们需要把异步操作从map里抽出来，等异步请求拿到结果后，再生成新的设备列表并更新状态：

• 先定位到需要更新的目标设备，避免无意义的遍历
• 发起异步请求获取更新后的设备数据
• 基于返回的最新数据生成新列表，最后触发状态更新

修正后的代码 #

setDeviceTimeout = id => timeout => {
  const { onSetDevices, devices } = this.props;
  
  // 1. 找到要更新的目标设备
  const targetDevice = devices.find(device => device.id === id);
  if (!targetDevice) return; // 没找到对应设备直接返回，避免后续报错

  // 2. 发起异步请求，提交更新后的设备数据
  deviceTable.oncePostDevice({ ...targetDevice, timeout })
    .then(updatedDevice => {
      // 3. 生成新的设备列表，替换掉旧的目标设备
      const newDeviceList = devices.map(device => 
        device.id === id ? updatedDevice : device
      );
      // 异步操作完成后，再触发状态更新
      onSetDevices(newDeviceList);
    })
    .catch(error => {
      // 别忘了处理请求失败的情况，比如给用户提示或者日志记录
      console.error('更新设备超时时间失败:', error);
    });
}

为什么这样改？ #

• 用find替代在map里判断，只定位需要更新的设备，更高效
• 把异步逻辑移到map外面，确保只有拿到最新的设备数据后，才生成新列表并更新状态
• 添加了错误处理，避免异步请求失败时没有任何反馈

如果以后遇到需要批量异步更新多个设备的场景，可以用Promise.all来等待所有异步操作完成后再统一更新状态，但这个场景下单个设备的处理就足够了。

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