如何在Material UI表格中实现行删除功能？React项目技术求助

核心修改步骤 #

1. 给删除按钮传递当前行ID

修改表格中的Delete按钮，在onClick中传入当前post的id，让删除函数明确知道要删除哪一行数据：

<StyledTableCell align="center">
  <Button variant="outlined" color="error" onClick={() => handleClick(post.id)}>Delete</Button>
</StyledTableCell>

2. 更新删除处理函数

修改handleClick函数，完成前端状态更新和后端API调用两个核心操作：

const handleClick = async (postId) => {
  try {
    // 调用后端删除接口（这里用jsonplaceholder模拟接口，实际项目替换为你的真实接口）
    await fetch(`https://jsonplaceholder.typicode.com/posts/${postId}`, {
      method: 'DELETE',
    });

    // 前端过滤掉被删除的条目，更新状态
    setPosts(prevPosts => prevPosts.filter(post => post.id !== postId));
    
    console.log(`ID为${postId}的条目已删除`);
  } catch (error) {
    console.error('删除失败:', error);
  }
};

逻辑说明 #

• 传递post.id：每条数据的id是唯一标识，删除函数需要它定位目标条目。
• 使用prevPosts：React状态更新推荐函数式写法，确保拿到最新的状态值，避免更新滞后问题。
• API调用：jsonplaceholder的Delete接口是模拟用的，不会真的删除服务器数据，实际项目要替换成自己的后端删除接口，保证前后端数据同步。

额外提示 #

如果想避免误删，可以结合Material UI的Dialog组件添加删除确认弹窗，提升交互安全性。

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