React如何在for循环中发起POST请求？附表格批量删除代码疑问

嘿，针对你在React里想在for循环中发起POST请求的需求，结合你给出的代码片段，我来梳理下靠谱的解决方案，顺便先点出你现有代码里的几个小问题：

• 你在循环里每次都调用setState保存jsonBefore，但其实只需要在循环开始前保存一次删除前的json状态就够了——毕竟setState是异步的，多次调用容易导致状态混乱。
• 如果直接在for循环里用await fetch，会串行执行每个请求（一个完成才会启动下一个）；但如果不用await，又没法跟踪所有请求的完成状态，很容易出现状态更新遗漏的情况。

下面给你两种常用的方案，按需选择：

方案1：串行执行（按顺序处理请求） #

适合需要确保前一条删除完成后再处理下一条的场景，比如接口依赖执行顺序、需要避免并发冲突时：

async onAfterDeleteRow(rowKeys) {
  // 先保存删除前的状态，只执行一次
  this.setState({ deleting: true, jsonBefore: this.state.json });
  
  try {
    // 用for...of循环搭配await，实现串行执行
    for (const key of rowKeys) {
      console.log(`开始处理删除: ${key}`);
      const response = await fetch('你的删除接口地址', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
          // 这里可以添加认证头、Token等接口需要的信息
        },
        body: JSON.stringify({ rowKey: key }) // 根据接口要求传递参数
      });

      // 检查请求是否成功
      if (!response.ok) {
        throw new Error(`删除${key}失败，状态码: ${response.status}`);
      }

      console.log(`${key} 删除成功！`);
    }

    // 所有请求完成后，更新状态并可刷新表格数据
    this.setState({ deleting: false });
    // 这里可以添加重新获取最新表格数据的逻辑
  } catch (error) {
    console.error('删除过程中出现错误:', error);
    // 出错后一定要重置deleting状态，避免页面一直处于加载中
    this.setState({ deleting: false });
    // 可以在这里添加用户提示，比如弹出错误弹窗
  }
}

方案2：并行执行（提高请求效率） #

如果你的删除接口支持并发处理，不需要按顺序执行，用Promise.all同时发起所有请求，总耗时会大幅缩短：

async onAfterDeleteRow(rowKeys) {
  // 先保存删除前的初始状态
  this.setState({ deleting: true, jsonBefore: this.state.json });
  
  try {
    // 把每个删除请求包装成Promise，存入数组
    const deleteTasks = rowKeys.map(key => {
      console.log(`发起删除请求: ${key}`);
      return fetch('你的删除接口地址', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({ rowKey: key })
      }).then(response => {
        if (!response.ok) {
          throw new Error(`删除${key}失败`);
        }
        return key; // 返回成功删除的key，方便后续统计
      });
    });

    // 等待所有请求完成
    const successfulDeletes = await Promise.all(deleteTasks);
    console.log(`成功删除以下条目: ${successfulDeletes.join(', ')}`);

    // 完成后更新状态
    this.setState({ deleting: false });
    // 刷新表格数据等后续操作
  } catch (error) {
    console.error('删除出错:', error);
    this.setState({ deleting: false });
    // 错误提示逻辑
  }
}

额外注意事项 #

• 状态更新最佳实践：jsonBefore一定要在循环开始前保存，因为this.state可能会在后续操作中变化，提前保存才能拿到准确的删除前数据。
• 错误处理不能少：不管用哪种方案，都要加上错误捕获，否则某个请求失败会导致整个函数卡住，页面一直显示“删除中”。
• 接口幂等性：如果用并行方案，要确保你的删除接口是幂等的——也就是说，重复调用同一个删除请求不会产生额外副作用（比如不会报错或者重复删除），避免网络波动导致的重试问题。

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