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

Question

我在我的 react 应用程序中引入了一个名为 react-hooks-paginator 的新包（此处的文档），并将它添加到我想使用分页的几个页面（例如产品列表）。它工作正常，但添加后会导致一些意想不到的副作用。

1. 单击分页页码时会导致速度变慢。

2. 分页内的一些应用内导航（使用 react-router-dom 的“链接”。与锚标签类似，但为登录用户保留会话）并不总是有效。有时我必须多次单击它。

3. 得到：“警告：无法在未安装的组件上执行 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]);