【发布时间】:2020-12-25 11:36:01
【问题描述】:
我正在通过 React redux-saga 在 Firebase 中实现产品项目的删除功能。但是我有一个问题,已经获得了要删除的产品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 实现的功能。
任何人对我有任何意见或支持,我真的需要你的帮助来解决我的问题。非常感谢。
【问题讨论】:
标签: reactjs firebase-realtime-database delete-row