React应用中Axios Delete请求报404(Not Found)错误排查与修复

我正在尝试在React应用中实现删除按钮功能，将Axios请求逻辑抽离到独立模块persons.js中以简化App.js代码。页面在浏览器中运行正常，但点击删除按钮时，持续出现错误：DELETE http://localhost:3001/persons/undefined 404 (Not Found)。我发现问题出在id无法被正确识别，虽然已在persons.js的deletePerson函数中传入id，且在Person组件中设置了key={person.id}。我尝试将传递给handleDelete的参数从index改为person.id，但仍然无效。

相关代码逻辑 #

App.js部分代码 #

import { useState, useEffect } from 'react'
import personService from './services/persons'
import Person from './components/Person'

.......

const handleDelete = (index) => {
    const newPerson = persons.filter((_, id) => id !== index)

    personService
      .delete()
      .then(response=> {
        setPersons(newPerson.concat(response.data))
    })
  }

Person组件调用部分 #

<ul>
  {persons.filter((person) => {
    if (searchTerm === "") {
    return person
  } else if (person.name.toLowerCase().includes(searchTerm.toLowerCase())) {
    return person
  }
  }).map((person, index) => {
    return (
    <Person key={person.id} person={person}  deleteButton={()=>handleDelete(index)} text='Delete' />
  );
  })
  }
  </ul>

Person组件代码 #

import React from "react";

const Person = ({person, deleteButton, text}) => {
  return (
    <div>
        <li> 
          {person.name} {person.number}
          <button onClick={deleteButton}> {text} </button> 
        </li>
    </div>
  );
}

export default Person

persons.js代码 #

import axios from 'axios'
const baseUrl = 'http://localhost:3001/persons'

const getAll = () => {
  return axios.get(baseUrl)
}

const create = newObject => {
  return axios.post(baseUrl, newObject)
}

const update = (id, newObject) => {
  return axios.put(`${baseUrl}/${id}`, newObject)
}

const deletePerson = (id) => {
  return axios.delete(`${baseUrl}/${id}`)
}


export default { 
  getAll: getAll, 
  create: create, 
  update: update,
  delete: deletePerson
}

解决方法 #

错误根源有三个：

1. 调用delete接口时未传入id：personService.delete()没有传递id参数，导致接口URL中的id为undefined
2. 传递给handleDelete的参数错误：用index作为删除标识不合理，过滤后的数组index和原始数据id不对应，应该直接传递person.id
3. 删除后的状态更新逻辑错误：DELETE请求一般不会返回被删除的数据，不需要用newPerson.concat(response.data)，直接用过滤后的数组更新即可

修改后的代码 #

1. 修正App.js中的handleDelete函数

const handleDelete = (personId) => {
  // 可选：添加确认提示提升用户体验
  if (window.confirm(`确定要删除${persons.find(p => p.id === personId)?.name}吗？`)) {
    personService
      .delete(personId) // 传入id参数
      .then(() => {
        // 过滤掉被删除的用户，更新状态
        setPersons(persons.filter(person => person.id !== personId))
      })
      .catch(error => {
        // 处理请求失败的情况，比如用户已被后端删除
        alert('该用户已被删除')
        setPersons(persons.filter(person => person.id !== personId))
      })
  }
}

2. 修改Person组件的参数传递

将handleDelete(index)改为handleDelete(person.id)：

<ul>
  {persons.filter((person) => {
    if (searchTerm === "") {
      return person
    } else if (person.name.toLowerCase().includes(searchTerm.toLowerCase())) {
      return person
    }
  }).map((person) => { // 不需要index可省略
    return (
      <Person 
        key={person.id} 
        person={person}  
        deleteButton={()=>handleDelete(person.id)} 
        text='Delete' 
      />
    );
  })}
</ul>

3. （可选）优化persons.js的导出命名

由于delete是JavaScript关键字，建议重命名导出属性避免潜在问题：

export default { 
  getAll: getAll, 
  create: create, 
  update: update,
  deletePerson: deletePerson // 把delete改为deletePerson
}

对应的调用也要改成personService.deletePerson(personId)

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