Reactjs 在redux saga中添加请求删除产品项时，页面加载时间很长

我正在用redux saga在Firebase中制作一个

deleteProductRequest

产品项。首先，我做了一个表格，这是一个从引导表定制的表格

这是我在表中的代码，在这个表中，我首先获取产品。这意味着我从firebase获得了所有产品列表

import React, { useEffect } from "react";
import { Container, Row, Col, Table } from "react-bootstrap";
import Loading from "../../components/Loading";
import Button from "../../components/Button/index"
import PropTypes from "prop-types";
import "../ProductTableList/index.css";

const ProductTableList = ({
  products,
  loading,
  fetchProductRequest,
  deleteProductRequest
}) => {
  useEffect(() => {
    fetchProductRequest();
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

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

  const handleDelete = (productId) => {
    deleteProductRequest(productId);
  }

  const handleUpdate = (event) => {
    //TODO
  }

  return (
    <Table striped bordered hover className="product-table">
      <thead>
        <tr>
          <th>No.</th>
          <th className="image-col">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(index)}
                    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;

之后，我转到

API

与Firebase交互

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

const firebaseDb = firebaseApp.database();
const firebaseStorage = firebaseApp.storage();

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


export const deleteProduct = (productId) => {
  firebaseDb
    .ref()
    .child(`products/${productId}`)
    .remove((err) => {
      console.log(err);
    });
}

然后我创建

productReducer

import { createReducer } from "reduxsauce";
import { Types } from "../actions/productAction";

const INITIAL_STATE = {
  products: [],
  loading: false,
  error: "",
};

const fetchProductRequest = (state, action) => ({
  ...state,
  loading: true,
});

const fetchProductSuccess = (state, action) => ({
  ...state,
  loading: false,
  products: action.data,
});

const fetchProductFailure = (state, action) => ({
  ...state,
  loading: false,
  error: action.error,
});


const deleteProductRequest = (state, action) => ({
  ...state,
  loading: true,
  type: action.type,
});

// const deleteProductSuccess = (state, action) => ({
//   ...state,
//   loading: false,
//   products: action.product,
//   type: action.type,
// });

// const deleteProductFailure = (state, action) => ({
//   ...state,
//   loading: false,
//   error: action.error,
//   type: action.type,
// });

export const HANDLERS = {
  [Types.FETCH_PRODUCT_REQUEST]: fetchProductRequest,
  [Types.FETCH_PRODUCT_SUCCESS]: fetchProductSuccess,
  [Types.FETCH_PRODUCT_FAILURE]: fetchProductFailure,

  [Types.DELETE_PRODUCT_REQUEST]: deleteProductRequest,
  // [Types.DELETE_PRODUCT_SUCCESS]: deleteProductSuccess,
  // [Types.DELETE_PRODUCT_FAILURE]: deleteProductFailure,
};

const productReducer = createReducer(INITIAL_STATE, HANDLERS);

export default productReducer;

最后，我做了一个

productSaga

import { call, put, takeLatest } from "redux-saga/effects";
import { Types, Creators } from "../actions/productAction";
import { doCreateProduct, onceGetProducts, deleteProduct } from "../api/productAPI";

export function* fetchProductRequest() {
  try {
    const response = yield call(onceGetProducts);
    if (response.status === "ok") {
      yield put(Creators.fetchProductSuccess(response.products));
    } else {
      yield put(Creators.fetchProductFailure(response.error));
    }
  } catch (error) {
    yield put(Creators.fetchProductFailure(error));
  }
}


export function* deleteProductRequest(action) {
  try {
    const { productId } = action;
    const response = yield call(deleteProduct, productId);

    if ((response.status === "ok")) {
      yield put(Creators.deleteProductSuccess(response.products));
    } else {
      yield put(Creators.deleteProductFailure(response.error));
    }
  } catch (error) {
    yield put(Creators.createProductFailure(error));
  }
}

export default function* watchProductRequest() {
  yield takeLatest(Types.FETCH_PRODUCT_REQUEST, fetchProductRequest);
  yield takeLatest(Types.DELETE_PRODUCT_REQUEST, deleteProductRequest);
}

我不知道，我没有点击

handleDelete

按钮，但是页面加载太长了，然后它停止说它不能再运行了。我不知道上面所有的代码行中我是否都遗漏了或错了

---

谁能帮我解决这个问题，我真的不明白我到底在干什么。非常感谢你。我始终欢迎您的所有评论

使用单击“删除”按钮时的箭头功能

<Button onClick={() => handleDelete(index)} btnText="Delete" />

handleDelete（index）}btnText=“删除”/>

我的按钮是从另一个文件夹导入的，我能按你说的做吗？是的，你已经在

产品表列表中导入了它。您只需在
ProductTableList
中的delete（删除）按钮上更改一行。您当前面临的错误或任何控制台消息是什么？
<Button onClick={() => handleDelete(index)} btnText="Delete" />