反应从数据库中删除项目答案

【问题标题】：React Deleting Item From Database反应从数据库中删除项目
【发布时间】：2021-12-28 16:10:45
【问题描述】：

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

前面是这样的：

我刚开始学习 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>
  );
}

【问题讨论】：

您需要向服务器后端脚本发送 AJAX 或查询请求，然后该脚本为您的数据库运行必要的 MySQL。您是否开始使用服务器后端脚本？
我有我的后端。它的 mongodb，你可以看到我已经从我的后端获得了 axios.get
你的后端有删除端点吗？
是的，它就像“url/itemName”
axios.get 调用在您的前端。 appItem 的代码是什么？那需要进行删除，然后返回成功/失败/无论如何。您似乎已经在处理它在您的then() 电话中给出的任何响应。但是该后端代码会很有用。

标签： reactjs axios frontend backend

【解决方案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>
  );

【讨论】：

这种方式行不通，因为 itemName 每次都未定义
因为你没有在 delete 函数中传递 itemName。我用onClick={() => deleteButton(li)} 更新了我的答案，请尝试一下

【解决方案2】：

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

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

【讨论】：