未捕获的错误：无法在未安装的组件上找到节点（react-dom）

Question

我正在使用 mern stack 编写一个 webapp，在编写代码时我收到了这个错误，不知道这个错误发生在哪里。 有关错误的详细信息如下

Uncaught Error: Unable to find node on an unmounted component.
at findCurrentFiberUsingSlowPath (react-dom.development.js:4303)
at findCurrentHostFiber (react-dom.development.js:4465)
at findHostInstanceWithWarning (react-dom.development.js:25389)
at Object.findDOMNode (react-dom.development.js:26067)
at Trigger._this.getRootDomNode (index.js:237)
at Trigger._this.attachParent (index.js:331)
at index.js:349
at callRef (raf.js:36)
at raf.js:40

这是我在更改整个应用程序正常工作之前更改的唯一文件我认为这是发生上述错误的文件

import React, { Fragment, useState, useEffect } from "react";
import Pagination from 'react-js-pagination';
import { useParams } from 'react-router-dom';
import Slider from 'rc-slider';
import 'rc-slider/assets/index.css';

import MetaData from "./layout/MetaData";
import Product from "./product/Product";
import Loader from "./layout/Loader";

import { useDispatch, useSelector } from "react-redux";
import { useAlert } from "react-alert";
import { getProducts } from "../actions/productActions";

const { createSliderWithTooltip } = Slider
const Range = createSliderWithTooltip(Slider.Range)

const Home = () => {
const [currentPage, setCurrentPage] = useState(1)
const [price, setPrice] = useState([1, 1000])
const [category, setCategory] = useState('')

const categories = [
    'books',
    'pencils',
    'cuters',
    'pastles',
    'Electronics',
    'Headphones',
    'Accessories',
    'Cameras',
    'Laptops',
    'Food'
]

const alert = useAlert();
const dispatch = useDispatch();
const params = useParams();

const { loading, products, error, productCount, resPerPage } = useSelector(
    (state) => state.products
);

const keyword = params.keyword

useEffect(() => {
    if (error) {
        return alert.error(error);
    }

    dispatch(getProducts(keyword, currentPage, price, category));

}, [dispatch, alert, error, keyword, currentPage, price, category]);

function setCurrentPageNo(pageNumber) {
    setCurrentPage(pageNumber)
}

return (
    <Fragment>
        {loading ? (
            <Loader />
        ) : (
            <Fragment>
                <MetaData title={"Home page"} />

                <h1 id="products_heading">Latest Products</h1>

                <section id="products" className="container mt-5">
                    <div className="row">
                        {keyword ? (
                            <Fragment>
                                <div className="col-6 col-md-3 mt-5 mb-5">
                                    <div className="px-5">
                                        <Range
                                            marks={{
                                                1: `$1`,
                                                1000: `$1000`
                                            }}
                                            min={1}
                                            max={1000}
                                            defaultValue={[1, 1000]}
                                            tipFormatter={value => `$${value}`}
                                            tipProps={{
                                                placement: "top",
                                                visible: true
                                            }}
                                            value={price}
                                            onChange={price => setPrice(price)}
                                        />

                                        <hr className="my-5" />

                                        <div className="mt-5">
                                            <h4 className="mb-3">
                                                Categories
                                            </h4>

                                            <ul className="pl-0">
                                                {categories.map(category => (
                                                    <li
                                                        style={{
                                                            cursor: "pointer",
                                                            listStyleType: "none"
                                                        }}
                                                        key={category}
                                                        onClick={() => setCategory(category)}
                                                    >
                                                        {category}
                                                    </li>
                                                ))}
                                            </ul>
                                        </div>
                                    </div>
                                </div>

                                <div className="col-6 col-md-9">
                                    <div className="row">
                                        {products.map((product) => (
                                            <Product key={product._id} product={product} col={4} />
                                        ))}
                                    </div>
                                </div>
                            </Fragment>
                        ) : (
                            products.map((product) => (
                                <Product key={product._id} product={product} col={3} />
                            ))
                        )}

                    </div>
                </section>

                {resPerPage <= productCount && (
                    <div className="d-flex justify-content-center mt-5">
                        <Pagination
                            acvitePage={currentPage}
                            itemsCountPerPage={resPerPage}
                            totalItemsCount={productCount}
                            onChange={setCurrentPageNo}
                            nextPageText={'Next'}
                            prevPageText={'Prev'}
                            firstPageText={'First'}
                            lastPageText={'Last'}
                            itemClass="page-item"
                            linkClass="page-link"
                        />
                    </div>
                )}
            </Fragment>
        )}
    </Fragment>
);
};

export default Home;

这是git 存储库，如果您想了解更多信息，请检查最后一次提交