我正在通过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实现。
任何人对我有任何评论或支持,我真的需要您的帮助来解决我的问题。非常感谢。
答案 0 :(得分:0)
请您尝试以下代码
export const deleteProduct = (productId) => {
return firebaseDb.ref('items').child(productId).removeValue();
}