React中使用fetch和useEffect Hook发送API DELETE请求如何传递id？

核心问题说明 #

你不需要将DELETE请求的执行逻辑放到useEffect中，删除行为是用户点击按钮触发的即时交互，和组件生命周期/状态变化触发的副作用没有关联，直接在点击事件的处理函数中执行请求即可。

现有代码的两处核心问题：

• 你在handleDelete中仅给deleteJSON变量赋值了异步函数，但从未实际调用该函数，点击按钮后不会发起任何请求
• useEffect的作用仅为组件挂载时拉取全量用户列表，和删除逻辑完全解耦，不需要尝试在useEffect中访问删除函数

修正后代码 #

import { useState, useEffect } from 'react';

const Display = () => {
  const [state, setState] = useState([])

  // 直接在处理函数中封装完整删除逻辑
  const handleDelete = async (_id) => {
    try {
      const res = await fetch(`http://localhost:8080/users/${_id}`, {
        method: 'DELETE',
        mode: 'cors'
      })
      if (res.ok) {
        // 删除成功后更新本地state，同步页面显示
        setState(prevState => prevState.filter(item => item._id !== _id))
      }
      console.log('删除状态：', res.status)
    } catch (err) {
      console.error('删除请求失败：', err)
    }
  }

  // 原有拉取用户列表的逻辑保持不变
  useEffect(() => {
    (async () => {
      const res = await fetch('http://localhost:8080/users', {
        method: 'GET',
        mode: 'cors'
      })
      const jsonArr = await res.json()
      setState((prevState) => {
        return [...prevState, ...jsonArr]
      })
    })();
  }, [])

  return (
    <div className='display'>
      {
        state.map((json) => {
          const {name, email, phone, _id} = json
          return (
              <div key = {_id} >
                <div>
                  {/* 点击直接传入id调用删除函数 */}
                  <button onClick={() => handleDelete(_id)} className="box" >Delete</button>
                  <button className="box">Update</button>
                </div>
                <h2>{_id}</h2>
                <h2>{name}</h2>
                <h2>{email}</h2>
                <h2>{phone}</h2>
              </div>
          )
        })
      }
    </div>
  )
}

特殊场景：需通过useEffect触发删除的实现方案 #

如果你确实有场景需要依赖状态变化自动触发删除（比如其他全局状态变更时自动清理数据），可以将待删除的id存为state变量，加入useEffect的依赖数组即可：

const [deleteId, setDeleteId] = useState(null)

// 点击按钮仅更新待删除id
const handleDelete = (_id) => {
  setDeleteId(_id)
}

// 监听deleteId变化，自动执行删除逻辑
useEffect(() => {
  // 无待删除id时直接返回
  if (!deleteId) return
  const execDelete = async () => {
    try {
      const res = await fetch(`http://localhost:8080/users/${deleteId}`, {
        method: 'DELETE',
        mode: 'cors'
      })
      if (res.ok) {
        setState(prev => prev.filter(item => item._id !== deleteId))
      }
    } catch (err) {
      console.error('删除失败', err)
    } finally {
      // 重置待删除id
      setDeleteId(null)
    }
  }
  execDelete()
}, [deleteId])

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