如何使用Axios结合URL数组批量删除API中的选中任务？

问题根源 #

你当前的批量删除代码存在两个核心问题：

1. 缺少单个删除时的关键参数：单个删除请求里传了{ done: true }，但批量请求里没带这个配置，MockAPI很可能依赖这个参数执行删除逻辑，导致请求返回200但实际未处理删除操作。
2. 未同步本地状态：请求完成后没更新本地的任务列表和选中状态数组，即使接口删除成功，本地数据没变化，刷新前看起来像没生效。

修正后的批量删除代码 #

const deleteAll = () => {
  // 生成每个带正确配置的删除请求
  const deleteRequests = isChecked.map(taskId => {
    const deleteUrl = `https://63cf2168e52f5878299ab5e2.mockapi.io/api/users/${userid}/tasks/${taskId}`;
    // 注意：axios.delete的请求体要放在config.data里
    return axios.delete(deleteUrl, { data: { done: true } });
  });

  // 并发执行所有删除请求
  axios.all(deleteRequests)
    .then(() => {
      // 请求成功后同步本地状态：清空选中项，移除已删除的任务
      setIsChecked([]);
      setTasks(prevTasks => prevTasks.filter(task => !isChecked.includes(task.id)));
    })
    .catch(err => {
      console.error('批量删除出错:', err);
    });
};

关键细节说明 #

• 参数传递正确方式：axios的DELETE方法中，请求体内容需要放在配置对象的data属性里，你之前单个删除的写法省略了外层的data字段，批量请求时必须明确写出，否则参数不会被正确传递到接口。
• 本地状态同步：请求完成后立即更新isChecked和任务列表，不用刷新页面就能看到删除效果，也避免后续操作因为状态不同步出现问题。

备选方案（串行请求） #

如果并发请求导致MockAPI处理不完全（部分任务没删除），可以改成串行执行请求：

const deleteAll = async () => {
  try {
    for (const taskId of isChecked) {
      const deleteUrl = `https://63cf2168e52f5878299ab5e2.mockapi.io/api/users/${userid}/tasks/${taskId}`;
      await axios.delete(deleteUrl, { data: { done: true } });
    }
    // 同步本地状态
    setIsChecked([]);
    setTasks(prevTasks => prevTasks.filter(task => !isChecked.includes(task.id)));
  } catch (err) {
    console.error('批量删除失败:', err);
  }
};

内容的提问来源于stack exchange，提问作者Freddy Alex Saavedra