Question

我正在通过React redux-saga在Firebase中实现产品项的Delete功能。但是我有一个问题，已获取要删除的产品ID，但尚未从Firebase中删除该产品

我不明白我在哪里失踪

这是我的产品表单代码

import React, { useState, useEffect } from "react";
import { Form, Container } from "react-bootstrap";
import PropTypes from "prop-types";
import Button from "../../components/Button";
import { CATEGORIES } from "../../constants/categories";
import Loading from "../../components/Loading"
import "../ProductForm/index.css";

const ProductForm = ({
  product,
  createProductRequest,
  fetchProductRequest,
  loading,
  type }) => {

  const [values, setValues] = useState({
    image: "",
    name: "",
    price: 0,
    description: "",
    categoty: "",
  });

  const [imageAsFile, setImageAsFile] = useState();
  const [isValid, setIsValid] = useState(false);

  useEffect(() => {
    if (Object.keys(product).length) {
      setValues(product);
    }
  }, [product]);

  useEffect(() => {
    if (type.CREATE_PRODUCT_SUCCESS) {
      fetchProductRequest();
    }
  }, [fetchProductRequest, type]);

  const handleInputChange = (event) => {
    // Create new product to update
    const newPropdudct = {
      ...values,
      [event.target.name]: event.target.value,
    };
    // Update new product for value
    setValues(newPropdudct);
  };

  const handleFileChange = (event) => {
    const image = event.target.files[0]
    setImageAsFile(image)
  }

  const onHandleSubmit = () => {
    if (values.name.trim() === "") {
      setIsValid(false);
    }
    else {
      createProductRequest(values, imageAsFile);
    }
  };

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

  return (
    <Container className="product-form">
      <Form>
        <Form.Group>
          <Form.Group>
            <Form.File
              id="image"
              label="Image choose"
              value={values.image.name}
              onChange={handleFileChange}
            />
          </Form.Group>
        </Form.Group>

        <Form.Group controlId="name">
          <Form.Label>Name</Form.Label>
          <Form.Control
            type="text"
            placeholder="Enter product name"
            value={values.name}
            name="name"
            onChange={handleInputChange}
          />
        </Form.Group>

        <Form.Group controlId="categories">
          <Form.Label>Categories</Form.Label>
          <Form.Control
            as="select"
            name="category"
            value={values.category}
            onChange={handleInputChange}
          >
            {CATEGORIES.map((category) => (
              <option key={category}>{category}</option>
            ))}
          </Form.Control>
        </Form.Group>
        <Button
          btnText="Submit"
          size="btn-md"
          onClick={onHandleSubmit}
          disabled={isValid}
        />
      </Form>
    </Container>
  );
};

export default ProductForm;

这是productAPI，我实现了从Firebase删除

import { convertObjectToArray } from "../helpers/product";
import firebaseApp from "./config";

const firebaseDb = firebaseApp.database();
const firebaseStorage = firebaseApp.storage();
/**
 * Representation for get list product from firebase
 */

export const onceGetProducts = () =>
  firebaseDb
    .ref("products")
    .once("value")
    .then((products) => {
      const result = convertObjectToArray(products.val());
      return { products: result, status: "ok" };
    });


export const deleteProduct = (productId) => {
  return firebaseDb.ref('products').child('productId').remove();
}

我已经获得了该产品ID，但是无法将其从Firebase中删除

我认为productAPI中缺少一些内容。但我不知道如何解决我已经从另一个文件夹导入了按钮handleDelete功能。该功能由redux-saga实现。

任何人对我有任何评论或支持，我真的需要您的帮助来解决我的问题。非常感谢。

Answer 1

请您尝试以下代码

export const deleteProduct = (productId) => {
  return firebaseDb.ref('items').child(productId).removeValue();
}

无法从Firebase删除产品项目

1 个答案: