在 React 中，出现错误是不可避免的。当我们编写复杂的组件和应用程序时，可能会出现很多种类型的错误，比如 API 调用失败，未定义的变量，空引用等等。如何在 React 中处理这些错误将直接影响我们应用程序的稳定性和可维护性。本文将总结 React 中常见的错误处理方法。
1. 错误边界
React 16 引入了一种新的概念叫错误边界。错误边界是一种 React 组件，可以捕获它的子组件树中的 JavaScript 错误，并记录这些错误，展示出备用 UI，而不是整个组件树崩溃。
1.1. 创建错误边界
创建一个错误边界组件很简单，只需要实现 static getDerivedStateFromError() 和 componentDidCatch() 这两个生命周期函数即可。如下所示：
----- ------------- ------- --------------- -
------------------ -
-------------
---------- - - --------- ----- --
-
------ ------------------------------- -
-------------------
------ - --------- ---- --
-
------------------------ ---------- -
------------------ -----------
-
-------- -
-- --------------------- -
------ ------------- ---- ------------
-
------ --------------------
-
-getDerivedStateFromError() 在抛出错误后将被调用，并返回一个新的 state 对象。componentDidCatch() 在错误被捕获后调用，并提供有关错误的信息（例如，哪个组件导致错误）。
要使用错误边界组件，请将其包装在需要捕捉错误的组件周围：
--------------- -------------- -- ----------------
1.2. 注意事项
- 可以使用多个错误边界来包装一个组件树，从而捕获不同等级的错误。
- 错误边界无法捕获以下情况中的错误：
- 事件处理程序（尝试在错误的 DOM 元素上设置事件处理程序）。
- 异步代码（例如
setTimeout或requestAnimationFrame回调函数）。 - 服务端渲染。
- 错误边界在开发模式下不会捕获错误。如果要测试错误边界，请确保在生产模式下进行。
2. 捕获 Promise 错误
在 JavaScript 中，Promise 错误不会自动抛出，因此在处理 Promise 链时，可能会在无法正常处理 Promise 包装的异步操作时遇到问题。这时可以通过 window.addEventListener() 来全局捕获 Promise 错误。代码如下：
--------------------------------------------- --------------- - ------------------------ ------- ------------ -------------- ---
但是这种方法有一个重大的缺点：它无法区分不同的 Promise 错误。为了从代码中清晰地、特定地处理每个 Promise 链，请改用 catch() 方法：
-----------
-------- -- -
-- -- ------- ---
--
------------ -- -
----------------------- -------
---3. 避免在渲染中使用常见错误
3.1. 访问未定义的变量
在 React 组件中使用未定义的变量是一种常见错误。可以通过使用 JavaScript 的可选链语法来避免此类错误：
----- ---- - -
----- ------
---- ---
--
------ -
-----
------------
----------------------
------
--在这个例子中，user?.name 表示只有在 user 变量存在时才显示 name。同样，user?.email?.address 表示只有在 email 存在并且不为空时才显示 address。
3.2. 渲染未定义的组件
在渲染时使用未定义的组件也是一种常见错误。要避免此类错误，应确保正确导入并使用组件。如果组件丢失，可以考虑使用 defaultProps 提供默认值。
------ - ---------- - ---- --------------- -- ----- --------------- ----------- -- ---------------- -- -- ---------- --------- ----------------------- - - --------- ------------ -------------- ----------------- --
4. 总结
以上是 React 中常见的错误处理方法。使用错误边界可以有效避免组件崩溃，全局捕获 Promise 错误和可选链语法可以有效避免在渲染时使用未定义的变量和组件，并提高代码的可维护性和稳定性。希望这篇文章对你有所帮助。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/64a1355748841e9894d79011