在我的反应应用程序中引入了分页。工作正常，但会出现一些减速和无响应的应用内导航。未安装组件警告

Question

我在我的 react 应用程序中引入了一个名为 react-hooks-paginator 的新包（此处的文档），并将它添加到我想使用分页的几个页面（例如产品列表）。它工作正常，但添加后会导致一些意想不到的副作用。单击分页页码时会导致速度变慢。分页内的一些应用内导航（使用 react-router-dom 的“链接”。与锚标签类似，但为登录用户保留会话）并不总是有效。有时我必须多次单击它。得到：“警告：无法在未安装的组件上执行 React 状态更新。这是一个无操作，但它表明您的应用程序中存在内存泄漏。要修复，请取消 useEffect 清理函数中的所有订阅和异步任务。” 当我离开带有分页的页面时。我几乎可以肯定卸载组件警告是问题的根源，但我不确定如何处理此错误。有人可以解释此警告的含义以及可以解决的问题吗？以下是我在分页中拥有的一个组件。productListPublic.js

Answer 1

我在您的 useEffect 中发现的问题。

使用isMount变量来跟踪元素的挂载状态，并能够避免在它已经卸载时更新反应状态。这应该删除警告。

最终代码：

    useEffect(() => {

        let isMount = true

        axios.get("http://localhost:4000/products/")

        .then(res => {

            if (!isMount) return // If element has unmount, dont update the state

            setProducts(res.data);

            setCurrentProducts(products.slice(offset, offset + pageLimit));

        }).catch(function(err) {

            if (!isMount) return // If element has unmount, dont update the state

            setIsError(true);

        })

        return () => {

          isMount = false

        }

    }, [offset, products]);