Question

我正在尝试删除产品，但是没有成功。我不知道如何删除该产品的ID

我的按钮onClick = {handleDelete}是从其他文件夹中的组件导入的。我尝试创建handleDelete函数，但是在这种情况下我错过了一些东西。

这是我在那部分的代码

import React, { useState, useEffect } from "react";
import { Container, Row, Col, Table } from "react-bootstrap";
import Loading from "../../components/Loading";
import Button from "../../components/Button/index"
import firebaseApp from "../../api/config";

const ProductTableList = ({
  products,
  loading,
  fetchProductRequest
}) => {
  useEffect(() => {
    fetchProductRequest();
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);


const firebaseDb = firebaseApp.database();
const [currentId, setCurrentId] = useState("");

  if (loading) {
    return (
      <Container>
        <Row>
          <Col>
            <Loading />
          </Col>
        </Row>
      </Container>
    );
  }

 

  const handleDelete = (id) => {
    const productId = firebaseDb.ref().push().key;
    if (window.confirm("Are you sure to delete this record?")) {
      firebaseDb
        .ref("products")
        .child(`products/${productId}`)
        .remove((err) => {
          if (err) console.log(err);
          else setCurrentId("");
        });
    }
  }

  const handleUpdate = (event) => {
    //TODO
  }
  return (
    <Table striped bordered hover className="product-table">
      <thead>
        <tr>
          <th>No.</th>
          <th className="image">Image</th>
          <th>Name</th>
          <th>Category</th>
          <th>Price</th>
          <th>Description</th>
          <th>Action</th>
        </tr>
      </thead>
      <tbody>
        {!!products && products.length > 0 ? (
          products.map((product, index) => {
            return (
              <tr key={index}>
                <td>{index}</td>
                <td>{product.image}</td>
                <td>{product.name}</td>
                <td>{product.category}</td>
                <td>{product.price}</td>
                <td>{product.description}</td>
                <td>
                  <Button onClick={handleDelete} btnText="Delete" />&nbsp;
                  <Button onClick={handleUpdate} btnText="Update" />
                </td>
              </tr>
            );
          })
        ) :
          (
            <tr><td className="center-title">Product list is empty!</td></tr>
          )}
      </tbody>
    </Table>
  )
}

export default ProductTableList;

有人可以帮助我吗？如何删除我选择的产品

有人可以为我解释或支持我吗？非常感谢

Answer 1

我举了一个例子，您需要在单击按钮时添加功能，然后使用要删除的商品ID。

import React, { useState, useEffect } from "react";
import { Table } from "react-bootstrap";

const ProductTableList = () => {

  const [currentId, setCurrentId] = useState("");
  const [products, setProducts] = useState([{
          image: 'image',
          name: '01',
          category: '01',
          price: '01',
          description: '01'
        },
        {
          image: 'image',
          name: '02',
          category: '02',
          price: '02',
          description: '02'
        },
        {
          image: 'image',
          name: '03',
          category: '03',
          price: '03',
          description: '03'
        }])

  const handleDelete = (id) => {
    const removeItem = products.filter((item) => item !== products[id])
    setProducts(removeItem)
  }

  return (
    <Table striped bordered hover className="product-table">
      <thead>
        <tr>
          <th>No.</th>
          <th className="image">Image</th>
          <th>Name</th>
          <th>Category</th>
          <th>Price</th>
          <th>Description</th>
          <th>Action</th>
        </tr>
      </thead>
      <tbody>
        {!!products && products.length > 0 ? (
          products.map((product, index) => {
            return (
              <tr key={index}>
                <td>{index}</td>
                <td>{product.image}</td>
                <td>{product.name}</td>
                <td>{product.category}</td>
                <td>{product.price}</td>
                <td>{product.description}</td>
                <td>
                  <button onClick={() => handleDelete(index)}>Delete</button>&nbsp;
                </td>
              </tr>
            );
          })
        ) :
          (
            <tr><td className="center-title">Product list is empty!</td></tr>
          )}
      </tbody>
    </Table>
  )
}

export default ProductTableList;

另外，避免将索引作为元素键

{ items.map((item, index) => (<li key={index}>{item}</li>)) }

当添加或删除列表项并且键保持不变时，React假定DOM元素未更改，并且应用程序无法呈现。

列表没有唯一ID的情况的另一种替代方法是使用shortID生成一个。

https://www.npmjs.com/package/shortid

如何删除餐桌产品中选择的物品

1 个答案: