React中点击列表旁图标通过Axios.delete删除数据库条目如何实现？

现有代码存在几个核心问题，修改后即可实现需求：

• 目前itemList被存为纯字符串数组，后续过滤、取字段都无法正常取值，建议存储接口返回的完整条目对象
• 删除按钮的点击事件没有绑定对应条目参数，无法获取要删除的目标数据
• 过滤逻辑写错了，纯字符串数组没有itemName属性
• key属性取值错误，你存的字符串没有itemId字段
• 没有添加Axios.delete的接口调用逻辑

修正后的完整代码 #

import { useState, useEffect } from 'react';
import Axios from 'axios';
import { Box, Grid, Typography, List, ListItem, ListItemAvatar, Avatar, ListItemText, IconButton, styled } from '@mui/material';
import DeleteIcon from '@mui/icons-material/Delete';
import FolderIcon from '@mui/icons-material/Folder';

export default function ItemControl() {
  const [itemList, setItemList] = useState([]);
  useEffect(() => {
    getItems();
  }, []);

  const url = "http://localhost:2000/appItem";

  const getItems = () => {
    // 发送GET请求获取所有条目，存储完整对象而非只存名称
    Axios.get(url).then((response) => {
      setItemList(response.data);
    });
  };

  const Demo = styled("div")(() => ({
    backgroundColor: "#f2f2f2",
  }));


  const deleteButton = (item) => {
    // 先调用删除接口，成功后再更新本地列表
    Axios.delete(`${url}/${item.name}`) // 接口路径根据你后端实际规则调整，如果要求传id就用item.id
      .then(() => {
        // 接口调用成功后过滤掉已删除的条目
        const newList = itemList.filter((el) => el.id !== item.id); // 用id过滤比name更稳妥，避免重名问题
        setItemList(newList);
      })
      .catch((err) => {
        console.error("删除失败：", err);
      });
  };
  return (
    <Box sx={{ flexGrow: 1, maxWidth: 752 }}>
      <Grid container spacing={2}>
        <Grid item xs={12} md={12}>
          <Typography sx={{ mt: 4, mb: 2 }} variant="h6" component="div">
            Items
          </Typography>
          <Demo>
            <List>
              {itemList.map((li) => (
                <ListItem
                  secondaryAction={
                    <IconButton
                      edge="end"
                      aria-label="delete"
                      onClick={() => deleteButton(li)} // 绑定当前条目作为参数传入删除方法
                    >
                      <DeleteIcon />
                    </IconButton>
                  }
                  key={li.id} // 用后端返回的唯一id作为key
                >
                  <ListItemAvatar>
                    <Avatar>
                      <FolderIcon />
                    </Avatar>
                  </ListItemAvatar>
                  <ListItemText primary={li.name} />
                </ListItem>
              ))}
            </List>
          </Demo>
        </Grid>
      </Grid>
    </Box>
  );
}

关键改动说明 #

1. 列表数据存储调整：不再只存条目名称，直接存储接口返回的完整对象，保留id、name等所有字段，避免后续操作找不到对应属性
2. 删除事件绑定：点击删除按钮时通过箭头函数将当前条目对象传入删除方法，能准确获取要删除的目标数据
3. 删除逻辑优化：先调用Axios.delete请求后端删除数据，接口返回成功后再更新本地列表，保证前后端数据一致。如果你的后端删除接口要求用id作为参数，直接把delete请求的参数改成${url}/${item.id}即可，用id过滤比用name更稳妥，不会出现重名误删的问题
4. 修复key错误：用后端返回的唯一id作为列表项的key，符合React的列表渲染规范

内容的提问来源于stack exchange，提问作者Miloš Milutinov