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

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

但是如果loading为true，则会在函数中尽早返回，从而阻止在某些渲染器上调用currentId useState。这意味着您正在有条件地调用useState挂钩。

要解决此问题，请将状态调用移到if (loading) {语句上方。

已选择如何删除产品

1 个答案: