反应从数据库中删除项目

Question

我有我的代码，其中列出了数据库中的所有项目，并在每个项目旁边放了一个图标。当我单击该图标时，我希望删除该项目。我该怎么做？

正面看起来像这样：

我刚开始学习 React，我希望得到所有帮助，我想在我的 deleteButton() 函数中加入 Axios.delete，按名称删除项目。

我正在使用反应材料

我的代码：

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

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

  const getItems = () => {
    // Sending HTTP GET request
    Axios.get(url).then((response) => {
      const itemListItems = [];
      response.data.forEach((resItem) => {
        itemListItems.push(resItem.name);
      });
      setItemList(itemListItems);
    });
  };

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


  const deleteButton = (itemName) => {
    console.log(itemName);
    let newList = itemList.filter((el) => el.itemName !== itemName);
    setItemList(newList);
  };
  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, index) => (
                <ListItem
                  secondaryAction={
                    <IconButton
                      edge="end"
                      aria-label="delete"
                      onClick={deleteButton}
                      id="name"
                    >
                      <DeleteIcon />
                    </IconButton>
                  }
                  key={li.itemId}
                >
                  <ListItemAvatar>
                    <Avatar>
                      <FolderIcon />
                    </Avatar>
                  </ListItemAvatar>
                  <ListItemText primary={li} />
                </ListItem>
              ))}
            </List>
          </Demo>
        </Grid>
      </Grid>
    </Box>
  );
}

Answer 1

在您的 deleteButton 活动中，您没有调用 axios.delete 来删除您的记录。请执行以下操作：

const deleteButton = (itemName) => {
    console.log(itemName);
    axios.delete('url/itemName').then(() => {
        let newList = itemList.filter((el) => el.itemName !== itemName);

        setItemList(newList);
    });
};

更新

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, index) => (
                <ListItem
                  secondaryAction={
                    <IconButton
                      edge="end"
                      aria-label="delete"
                      onClick={() => deleteButton(li)}
                      id="name"
                    >
                      <DeleteIcon />
                    </IconButton>
                  }
                  key={li.itemId}
                >
                  <ListItemAvatar>
                    <Avatar>
                      <FolderIcon />
                    </Avatar>
                  </ListItemAvatar>
                  <ListItemText primary={li} />
                </ListItem>
              ))}
            </List>
          </Demo>
        </Grid>
      </Grid>
    </Box>
  );

Answer 2

为了知道你想删除什么项目，你必须把它传递给你的函数deleteButton:

  <ListItem
    secondaryAction={
      <IconButton
        edge="end"
        aria-label="delete"
        onClick={() => deleteButton(li.itemName)} // this is changed
        id="name"
      >
        <DeleteIcon />
      </IconButton>
    }
    key={li.itemId}
  >

反应从数据库中删除项目

React Deleting Item From Database

frontend

backend

reactjs

axios