为何Delete按钮无法从JPA Repository中删除条目？

问题描述 #

尝试通过React页面的remove()方法从JPA Repository删除任务条目，但该功能失效，程序其他功能均正常。相关React页面代码如下（删除按钮关键代码已标注）：

import React, { Component } from 'react';
import '../css/TaskList.css';
import { Button, ButtonGroup, Container, Table } from 'reactstrap';
import Select from "react-select/creatable";
import AppNavbar from './AppNavbar';
import { Link } from 'react-router-dom';

class TaskList extends Component {

    constructor(props) {
        super(props);
        this.state = {tasks: [], isLoading: true};
        this.remove = this.remove.bind(this);
    }

    componentDidMount() {
        fetch('/tasks')
            .then(response => response.json())
            .then(data => this.setState({tasks: data, isLoading: false}));
    }

    async remove(id) {
        await fetch(`/tasks/${id}`, {
            method: 'DELETE',
            headers: {
                'Accept': 'application/json',
                'Content-Type': 'application/json'
            }
        }).then(() => {
            let updatedTasks = [...this.state.tasks].filter(i => i.id !== id);
            this.setState({tasks: updatedTasks});
        });
    }

    render() {
        const {tasks, isLoading} = this.state;

        if (isLoading) {
            return <p>Loading...</p>;
        }

        const options = [
            {value: 'priority', label: 'Priority'},
            {value: 'type', label: 'Type'},
            {value: 'class', label: 'Class'},
            {value: 'date', label: 'Due Date'}
        ]

        const handleSortSelectChange = (option) => {
            let updatedTasks;
            switch (option.value) {
                case 'priority':
                    updatedTasks = tasks.sort((a, b) => b.priority - a.priority);
                    break;
                case 'date':
                    updatedTasks = tasks.sort((a, b) => a.dueDate - b.dueDate);
                    break;
                case 'class':
                    console.log('Sort by class');
                    updatedTasks = tasks;
                    break;
                case 'type':
                    updatedTasks = tasks.sort((a, b) => b.typeID - a.typeID);
                    break;
                default:
                    updatedTasks = tasks.sort((a, b) => a.dueDate - b.dueDate);
            }

            this.setState({tasks: updatedTasks});
        }

        const taskList = tasks.map(task => {
            const date = task.dueDate;

            return (
                <tr key={task.id} onClick={() => window.location.href = "/tasks/" + task.id}>
                <td style={{whiteSpace: 'nowrap'}}><a href={"/tasks/" + task.id}>{task.name}</a></td>
                <td className='task-priority'>{getPriorityString(task.priority)}</td>
                <td>{task.courseID}</td>
                <td>{task.type}</td>
                <td>{date}</td>
                <td>
                    <ButtonGroup>
                        {/* 关键删除按钮 */}
                        <Button size="sm" color="danger" onClick={() => this.remove(task.id)}>Delete</Button>
                    </ButtonGroup>
                </td>
            </tr>
            );
        });

        return (
            <div>
                <AppNavbar/>
                <Container fluid>
                    <h3 className='m-2'>Tasks</h3>
                    <div id="list-top" className="m-2">
                        <Button color="success" tag={Link} to="/tasks/new">Add Task</Button>
                    </div>
                    <div id="list-sort" className="m-2">
                        <Select className='m-2' options={options} onChange={handleSortSelectChange}/>
                    </div>
                    <div id="list-top" className="m-2">
                        <h5 className='m-2'>Sort By</h5>
                    </div>
                    <Table className="m-2">
                        <thead>
                        <tr>
                            <th width="30%">Name</th>
                            <th width="10%">Priority</th>
                            <th width="20%">Class</th>
                            <th width="10%">Type</th>
                            <th width="20%">Due Date</th>
                            <th width="10%"></th>
                        </tr>
                        </thead>
                        <tbody>
                            {taskList}
                        </tbody>
                    </Table>
                </Container>
            </div>
        );
    }
}

function getPriorityString(priority) {
    let result = "";
    let i;
    for (i = 0; i < priority; i++) {
        result += "!";
    }
    return result;
}

export default TaskList;

排查方向与解决方法 #

1. 事件冒泡干扰删除操作 #

原代码中<tr>标签的onClick写法存在问题（直接赋值字符串而非函数），且点击Delete按钮时，事件会冒泡到父级<tr>，可能导致删除逻辑被中断或覆盖。

修复方法：

• 修正<tr>的onClick为合法的函数：

  <tr key={task.id} onClick={() => window.location.href = "/tasks/" + task.id}>
  

• 在Delete按钮的点击事件中阻止事件冒泡：

  <Button size="sm" color="danger" onClick={(e) => {
    e.stopPropagation(); // 阻止事件向上冒泡
    this.remove(task.id);
  }}>Delete</Button>
  

2. Fetch请求未处理错误响应 #

当前remove方法没有处理后端返回的错误状态（比如404、500），即使删除请求失败，前端仍会更新本地状态，造成“删除成功”的假象。

修复方法：
完善错误捕获与处理逻辑：

async remove(id) {
  try {
    const response = await fetch(`/tasks/${id}`, {
      method: 'DELETE',
      headers: {
        'Accept': 'application/json',
        'Content-Type': 'application/json'
      }
    });
    if (!response.ok) {
      throw new Error(`删除失败，HTTP状态码：${response.status}`);
    }
    // 仅在请求成功时更新本地状态
    let updatedTasks = [...this.state.tasks].filter(i => i.id !== id);
    this.setState({tasks: updatedTasks});
  } catch (error) {
    console.error('删除操作出错:', error);
    // 可添加用户提示，比如弹窗告知删除失败
  }
}

3. 后端JPA接口实现问题 #

需确认后端的DELETE接口是否正确调用JPA Repository的删除方法，且事务正常提交。

检查要点：

• Spring Boot Controller示例：

  @DeleteMapping("/tasks/{id}")
  public ResponseEntity<Void> deleteTask(@PathVariable Long id) {
      // 先检查条目是否存在，避免无意义操作
      if (!taskRepository.existsById(id)) {
          return ResponseEntity.notFound().build();
      }
      taskRepository.deleteById(id);
      return ResponseEntity.noContent().build();
  }
  

• 确保taskRepository继承了JpaRepository或包含deleteById方法。
• 检查事务配置，确保删除操作在事务中执行并提交。

4. ID类型不匹配 #

确认前端传递的task.id类型与后端接收的id类型一致（比如都是Long或String），类型不匹配会导致后端无法找到对应条目，删除操作无效果。

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