在React JS中如何实现点击按钮删除列表对应元素？

现有代码核心问题 #

• useEffect依赖项配置错误：将users加入依赖数组会导致每次更新用户列表后重新触发接口请求，陷入无限请求死循环，首次加载接口只需要空依赖数组即可。
• 删除逻辑缺失目标标识：当前deleteMe函数没有绑定要删除的用户ID，过滤逻辑也未做排除匹配，无法实现删除指定条目的效果。
• 列表渲染未加唯一key：map遍历输出列表项时未配置key属性，会触发React开发环境警告。

修复后完整代码 #

import React, { useEffect, useState } from 'react'
const App = () => {
  const [users, setUsers] = useState([])

  useEffect(() => {
    fetch("https://jsonplaceholder.typicode.com/users")
      .then((response) => response.json())
      .then((users) => {
        setUsers(users);
      })
  }, []); // 依赖改为空数组，仅首次挂载执行请求

  // 接收要删除的用户ID作为参数
  const deleteMe = (userId) => {
    setUsers(prevState => {
      // 过滤掉ID匹配的用户，剩下的就是删除后的列表
      return prevState.filter(user => user.id !== userId)
    })
  }

  return (
    <>
      {/* 给列表项加唯一key属性 */}
      {users.map((user) => {
        return (
          <div key={user.id}> 
            {user.name}
            {/* 点击时传入当前条目的用户ID */}
            <button onClick={() => deleteMe(user.id)}> Delete </button>
            {/* <button onClick={}> Update </button> */}
          </div>
        )
      })}
    </>
  )
}

export default App

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