如何删除产品已被删除答案

【问题标题】：How to Delete product has been seleted如何删除产品已被删除
【发布时间】：2020-09-03 19:22:12
【问题描述】：

我正在尝试删除产品，但没有显示成功。我不知道如何删除该产品的 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;

谁能帮助我？如何删除我选择的产品

谁能解释或支持我为什么？非常感谢

【问题讨论】：

标签： reactjs firebase-realtime-database

【解决方案1】：

Hooks rely on getting called the in the same order every time to work correctly。不能有条件地调用它们。

但是在你的组件中，如果loading 为真，你会提前从函数中返回，从而阻止currentId useState 在某些渲染上被调用。这意味着您正在有条件地调用 useState 挂钩，这是不允许的。

要解决此问题，请将状态调用置于 if (loading) { 语句之上。

【讨论】：