React hooks 是 React 16.8 版本中引入的新特性，它们为函数式组件添加了状态和其他功能。虽然 hooks 可以使代码更加简洁而优雅，但是也有可能会出现一些常见的错误，其中之一就是 “Can't perform a React state update on an unmounted component” 错误。
原因
当尝试在已卸载（unmounted）的组件上执行 React 状态更新时，就会抛出这个错误。一般情况下，这会发生在组件被异步加载或者取消渲染时。例如，在使用 setTimeout() 或 Promise 的回调函数中，如果组件在回调函数执行之前被卸载了，那么就会出现这个问题。
解决方案
为了解决这个问题，我们需要对组件是否已卸载进行判断。为了实现这一点，我们可以使用两种方法：
方法一：使用 useRef 钩子
-- -------------------- ---- -------
------ - --------- ---------- ------ - ---- --------
-------- --------- -
----- ------- --------- - ---------------
----- ------------ - -------------
------------ -- -
------ -- -- -
-------------------- - ------
--
-- ----
------------ -- -
------------------------- -- -
-- ---------------------- -
------------------------
-
---
------ -- -- -
-------------------- - ------
--
-- ----
------ -------------------
-在这个例子中，我们创建了一个名为 isMountedRef 的引用变量，并将其初始值设置为 true。然后，在组件卸载时，我们将其值设置为 false。在 useEffect 钩子函数中，我们首先使用 fetchData 函数获取数据并检查 isMountedRef 是否为 true，如果是，则更新组件的状态。
方法二：使用 useCallback 和 useState 钩子
-- -------------------- ---- -------
------ - --------- ----------- - ---- --------
-------- --------- -
----- ------- --------- - ---------------
----- --------- - -------------- -- -
------ ------------------
-------------- -- -----------------
-- ----
------------ -- -
--- --------- - -----
------------------------- -- -
-- ----------- -
------------------------
-
---
------ -- -- -
--------- - ------
--
-- -------------
------ -------------------
-在这个例子中，我们定义了一个名为 fetchData 的回调函数。这个函数会在 useEffect 中被调用，并异步获取数据。为了确保回调函数中使用的 isMounted 变量是正确的，我们需要使用 useCallback 钩子来避免每次渲染都创建新的函数。同时，我们也要在 useEffect 中返回清除函数，以确保在组件卸载前取消异步请求。
总结
React hooks 是一种有用而强大的工具，可以帮助我们更轻松地编写高效且易于维护的代码。但是，在使用 hooks 时，我们也要注意一些常见的问题和错误。其中一个问题就是在未挂载的组件上进行状态更新时会引发错误。为了避免这种错误，我们可以使用 useRef 或 useCallback 钩子来判断组件是否已卸载并防止不必要的状态更新。
希望本文能够帮助读者更好地理解 React hooks 并解决使用过程中遇到的问题。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/606f22022d2a29a3c12035bd