Express+React项目中删除接口:id参数undefined问题求助

你在Display组件里犯了两个关键错误：

1. 组件接收的props projectData 是整个项目数组，但你在handleDelete里直接用projectData.ID，数组本身没有ID属性，所以拼接出的URL是/api/undefined，导致后端req.params.id为undefined。
2. map遍历的时候，你把每个元素命名为projectData，和外层的props数组重名，造成作用域混淆，进一步加剧问题。

修改Display.js的代码，调整如下：

import React from 'react'
import Card from 'react-bootstrap/Card';
import Button from 'react-bootstrap/Button';

// 把props的数组改名为projects，避免和单个项目混淆
const Display = ({projects, updateState}) => {

  // 让handleDelete接收单个项目的id参数
  const handleDelete = (projectId) => {
    fetch(`/api/${projectId}`, {
      method: "DELETE",
      headers: {
        "Content-Type": "application/json"
      }
      // DELETE请求不需要传body，后端从url参数取id，这里可删除body部分
    })
    .then((response) => response.json())
    .then((response) => {
      console.log(response)
      updateState(response)
    })
  }

  return (
       <div className="flex flex-wrap displayCard justify-center">
        {/* map的元素命名为project，和外层的projects区分开 */}
        {projects.map((project, index) => (
            <Card style={{ width: '18rem' }} key={project.ID}>
            <Card.Body>
              <Card.Title>{project.TITLE}</Card.Title>
              <Card.Subtitle>{project.ID}</Card.Subtitle>
              <Card.Text>
              Description: {project.DESCRIPTION}
              </Card.Text>
              <Card.Text>
                  URL: {project.URL}
              </Card.Text>
               <Card.Link ><Button>edit</Button></Card.Link>
              {/* 点击时传入当前项目的ID */}
              <Card.Link ><Button onClick={() => handleDelete(project.ID)}>Delete</Button></Card.Link>
            </Card.Body>
          </Card>
        ))}
    
    </div>
  )
}

export default Display

• DELETE请求不需要传递body，后端通过URL参数:id获取项目ID，删除body部分减少冗余。
• 组件props的数组命名为projects更语义化，避免和单个项目混淆，提升代码可读性。

修改后点击删除按钮，会把当前项目的ID传入handleDelete，拼接出正确的请求URL，后端就能正常拿到req.params.id，找到对应项目完成删除操作。

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