React+Axios实现单条用户数据删除的异常排查与解决

核心问题 #

你在渲染用户列表时，按钮的onClick直接调用了deletePost(user._id)，这会导致组件首次渲染时就立刻执行所有用户的删除请求，而非点击按钮时才触发，所以后端会收到所有用户的_id。

前端代码修复 #

1. 修正按钮点击事件 #

把直接调用函数改成传递回调函数，确保只有点击时才执行删除操作：

// 替换原按钮代码
<button onClick={() => deletePost(user._id)}>Delete</button>

或者也可以让deletePost返回一个函数，避免每次渲染创建新的箭头函数：

const deletePost = (userid) => {
  return () => {
    axios.post('http://localhost:3001/deleteUser', {_id: userid})
      .then(() => {
        // 删除后直接更新前端列表，不用重新请求接口
        setListOfUsers(prev => prev.filter(user => user._id !== userid))
      })
      .catch(err => console.error('删除失败:', err))
  }
}

// 按钮直接绑定函数
<button onClick={deletePost(user._id)}>Delete</button>

2. 修复useEffect无限循环 #

当前useEffect没有依赖数组，会导致组件每次渲染都重新请求用户列表，加上空数组确保只在组件挂载时请求一次：

useEffect(() => {
  axios.get('http://localhost:3001/userlist').then((response) => {
    setListOfUsers(response.data)
  })
}, []) // 添加空依赖数组

3. 给列表项加唯一key #

React列表渲染必须给每个项加唯一key，避免性能问题和警告：

{listOfUsers.map((user) => {
  return (
    <div className="userdiv" key={user._id}> {/* 新增key属性 */}
      <h1>Id: {user._id}</h1>
      <h1>Name: {user.name}</h1>
      <h1>Age: {user.age}</h1>
      <h1>E-mail: {user.email}</h1>
      <button onClick={() => deletePost(user._id)}>Delete</button>
      <hr></hr>
    </div>
  )
})}

后端代码优化 #

1. 完善删除接口的响应逻辑 #

当前后端删除接口没有返回任何响应，前端无法知道删除是否成功，补充响应处理：

app.post('/deleteUser', (req, res) => {
  const userId = req.body._id
  usersModel.users.findOneAndDelete({_id: userId})
    .then(deletedUser => {
      if (deletedUser) {
        res.status(200).json({message: '用户删除成功', deletedUser})
      } else {
        res.status(404).json({message: '未找到该用户'})
      }
    })
    .catch(err => {
      res.status(500).json({message: '删除失败', error: err})
    })
})

2. 用async/await简化异步逻辑（可选） #

app.post('/deleteUser', async (req, res) => {
  try {
    const userId = req.body._id
    const deletedUser = await usersModel.users.findOneAndDelete({_id: userId})
    if (deletedUser) {
      res.status(200).json({message: '用户删除成功', deletedUser})
    } else {
      res.status(404).json({message: '未找到该用户'})
    }
  } catch (err) {
    res.status(500).json({message: '删除失败', error: err})
  }
})

完整修正后的前端代码示例 #

import React from "react"
import axios from "axios"
import { useState, useEffect } from "react"
import { Link } from "react-router-dom"

function UserList() {
  const [listOfUsers, setListOfUsers] = useState([])
  
  useEffect(() => {
    axios.get('http://localhost:3001/userlist')
      .then((response) => {
        setListOfUsers(response.data)
      })
      .catch(err => console.error('获取用户列表失败:', err))
  }, [])

  const deletePost = (userid) => {
    axios.post('http://localhost:3001/deleteUser', {_id: userid})
      .then(() => {
        // 前端直接更新列表，避免重复请求
        setListOfUsers(prevUsers => prevUsers.filter(user => user._id !== userid))
      })
      .catch(err => console.error('删除用户失败:', err))
  }

  return (
    <div className="userlistdiv">
      {listOfUsers.map((user) => (
        <div className="userdiv" key={user._id}>
          <h1>Id: {user._id}</h1>
          <h1>Name: {user.name}</h1>
          <h1>Age: {user.age}</h1>
          <h1>E-mail: {user.email}</h1>
          <button onClick={() => deletePost(user._id)}>Delete</button>
          <hr />
        </div>
      ))}
    </div>
  )
}

export default UserList;

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