Express+React项目中删除按钮无法触发后端Delete接口问题求助

问题背景 #

开发一款Web项目管理应用，支持用户展示、添加、编辑和删除自建Web项目（含3个预设项目）。目前除删除功能外，其余功能均正常运行。经Postman测试，后端DELETE接口可正常工作，但点击表格中的删除按钮时，该功能无法生效。

原因分析 #

1. 前端删除请求未传递项目ID：后端通过req.body.id获取待删除项目的ID，但前端发起DELETE请求时未携带该ID数据，导致后端无法定位到要删除的项目。
2. 前端状态未更新：即使后端成功删除项目，前端未同步更新页面状态，无法展示最新的项目列表。
3. 删除函数未绑定当前项目ID：每个删除按钮对应不同项目，但deleteItem函数未接收对应项目的ID参数，无法精准删除目标项目。

修复步骤 #

1. 修改TableData.js中的deleteItem函数，传递项目ID并触发状态更新

• 给deleteItem添加projectId参数，在请求体中携带ID传给后端
• 处理后端响应后，调用父组件传递的回调函数更新项目列表

2. 修改删除按钮的点击事件，传入当前项目ID

让每个删除按钮点击时，把对应项目的ID传给deleteItem函数

3. 在App.js中添加状态更新回调，同步前端数据

定义回调函数接收后端返回的最新项目列表，更新content状态实现页面刷新

修改后的完整代码 #

server.js（无需改动）

app.delete("/api/delete", (req, res) => {
    const projectId = parseInt(req.body.id);
    const projectIndex = webProjects.findIndex(project => project.ID === projectId);

    if (projectIndex === -1) {
        return res.status(404).send("Project not found");
    }

    webProjects.splice(projectIndex,1);
    res.send(webProjects);
})

TableData.js

import React from 'react'

export const TableData = ({ projectData, fillInput, onDeleteSuccess }) => {
  console.log(projectData)

  const deleteItem = (projectId) => {
    fetch("/api/delete", {
      method: "DELETE",
      headers: {
        "Content-Type": "application/json"
      },
      body: JSON.stringify({ id: projectId }) // 传递项目ID到后端
    })
    .then((response) => response.json())
    .then((updatedProjects) => {
      console.log(updatedProjects)
      onDeleteSuccess(updatedProjects) // 通知父组件更新状态
    })
    .catch(err => console.error("删除失败：", err))
  }

  return (
    <div>
      <div className="tableheading">
        <strong>My Projects</strong>
      </div>
      <table>
        <thead>
          <tr>
            <th>ID</th>
            <th>Title</th>
            <th>Description</th>
            <th>URL</th>
          </tr>
        </thead>
        <tbody>
          {projectData.map((project) => (
            <tr key={project.ID}>
              <td>{project.ID}</td>
              <td>{project.TITLE}</td>
              <td>{project.DESCRIPTION}</td>
              <td>{project.URL}</td>
              <td><button type="button" onClick={() => fillInput(project)}>edit</button></td>
              <td><button type="button" onClick={() => deleteItem(project.ID)}>Delete</button></td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  )
}

App.js

import React, { useEffect, useState } from 'react'
import { TableData } from './components/TableData'
import FormData from './components/FormData'

function App() {
  const [content, setContent] = useState({ webProjects: []});
  const [selectedProject, setSelectedProject] = useState(null);

  useEffect(() => {
    fetch("/api", {
      method: "GET",
      headers: {
        "Content-type": "application/json",
      }
    }).then((response) => response.json())
      .then((response) => {setContent(response)})
  }, [])

  const fillInput = (project) => {
    setSelectedProject(project)
  }

  const fillInputId = (project) => {
    setSelectedProject(project.ID)
  }

  // 处理删除成功后的状态更新
  const handleDeleteSuccess = (updatedProjects) => {
    setContent({ webProjects: updatedProjects })
  }

  return (
    <div>
      <TableData 
        projectData={content.webProjects}
        fillInput={fillInput}
        onDeleteSuccess={handleDeleteSuccess} // 传递回调函数给子组件
      />
      <FormData 
        selectedProject={selectedProject}
        setSelectedProject={setSelectedProject}
        fillInputId={fillInputId}
      />
    </div>
  )
}

export default App

验证说明 #

修改完成后，点击表格中的删除按钮，前端会携带对应项目ID发起DELETE请求，后端删除成功后返回最新项目列表，前端通过回调更新状态，页面会自动刷新展示删除后的列表。

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