Блог

Я пытаюсь удалить продукт, но он не показывает успеха. Я не знаю, как получить идентификатор этого продукта для удаления

Моя кнопка 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 amp;amp; 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" />amp;nbsp;
                  <Button onClick={handleUpdate} btnText="Update" />
                </td>
              </tr>
            );
          })
        ) :
          (
            <tr><td className="center-title">Product list is empty!</td></tr>
          )}
      </tbody>
    </Table>
  )
}

export default ProductTableList;
  

Кто-нибудь может мне помочь? Как мне удалить выбранный мной продукт

Кто-нибудь может объяснить или поддержать меня, почему? Большое вам спасибо

Я привел пример, вам нужно добавить свою функцию при нажатии кнопки и использовать свой идентификатор элемента для удаления.

 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 amp;amp; 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>amp;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>)) }
  

Когда элемент списка был добавлен или удален, а ключ остался прежним, реакция предположила, что элемент DOM не изменился, и приложение не смогло отобразить.

Альтернативой случаям, когда список не имеет уникального идентификатора, является его создание с использованием shortID.

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