如何过滤和删除数据库中的特定对象？ | React 作为前端，Rails 作为后端/API

Question

所以，事情就是这样，我现在正在学习 React，我正在构建一个小型任务管理器 webapp，其中 React 作为前端，Rails(API) 作为后端来练习使用 React 和 Rails（我已经用于构建其他网络应用程序）。 任务是数据库中的对象，它有一个“标题”作为字符串，“完成”作为一个布尔值来指示它们是否完成。 使用async 和await fetch('') 我设法创建了能够将方法直接传递给数据库的函数，以检查和取消选中已完成的任务，并删除任务。比如这样：

async deleteTask(task) {
            if (window.confirm(`Are you sure you want to delete: "${task.title}"`)) {
                await fetch(`http://localhost:3001/tasks/${task.id}`, {method: 'DELETE'});
                this.props.loadTasks();
            }
        }

现在我想创建一个函数来一次删除所有已完成的任务。我该怎么做？如何获取所有任务并通过“done == true”或类似的方式过滤它们并将DELETE方法传递给数据库？ 在此先感谢，任何帮助表示赞赏！我尝试了很多替代方案，甚至尝试过类似的方法，但没有成功：

async deleteAllDoneTasks() {
      if (window.confirm(`Are you sure you want to delete all done tasks?`)) {
          await fetch(`http://localhost:3001/tasks/)`, {method: 'DELETE FROM Tasks WHERE done = 1'});
          this.props.loadTasks();
      }
    }

编辑¹：因此，根据 JMadelaine 的说法，这不能由前端完成。那我如何在 Rails 中做到这一点？我如何在 React 中调用它，当我按下按钮时让它发生？ 我在下面评论了我首先要做什么。我将不胜感激任何见解、帮助或解决方案。谢谢:)

Answer 1

首先，您需要为此操作自定义路由，因为它不是默认的 CRUD 操作。 所以在routes.rb下tasks路由添加自定义路由，如：

delete 'tasks', to: 'tasks#multiple_delete'

然后在 TasksController 中定义 multiple_delete 方法，其中包含代码将删除所需的 tasks 并将答案返回给您的客户，例如：

def multiple_delete
  ::Task.where(done: true).destroy_all
  head :ok
end

然后在你的 React 中，根据服务器的回答你可以做一些事情。

然后转到您的 React 代码，在所需按钮上添加 onClick 事件（我不知道您使用的是哪个框架，我将分享我熟悉的 Shopify 代码示例。
在render()之外做：

deleteAllDoneTasks = () => {
      if (window.confirm(`Are you sure you want to delete all done tasks?`)) {
          await fetch(`http://localhost:3001/tasks)`, {method: 'DELETE'})
      }
}

在render() 里面做：

<Button onClick={this.deleteAllDoneTasks}>