在 React 中，出现错误是不可避免的。当我们编写复杂的组件和应用程序时，可能会出现很多种类型的错误，比如 API 调用失败，未定义的变量，空引用等等。如何在 React 中处理这些错误将直接影响我们应用程序的稳定性和可维护性。本文将总结 React 中常见的错误处理方法。
1. 错误边界
React 16 引入了一种新的概念叫错误边界。错误边界是一种 React 组件，可以捕获它的子组件树中的 JavaScript 错误，并记录这些错误，展示出备用 UI，而不是整个组件树崩溃。
1.1. 创建错误边界
创建一个错误边界组件很简单，只需要实现 static getDerivedStateFromError() 和 componentDidCatch() 这两个生命周期函数即可。如下所示：
-- -------------------- ---- ------- ----- ------------- ------- --------------- - ------------------ - ------------- ---------- - - --------- ----- -- - ------ ------------------------------- - ------------------- ------ - --------- ---- -- - ------------------------ ---------- - ------------------ ----------- - -------- - -- --------------------- - ------ ------------- ---- ------------ - ------ -------------------- - -展开代码
getDerivedStateFromError() 在抛出错误后将被调用，并返回一个新的 state 对象。componentDidCatch() 在错误被捕获后调用，并提供有关错误的信息（例如，哪个组件导致错误）。
要使用错误边界组件，请将其包装在需要捕捉错误的组件周围：
<ErrorBoundary> <YourComponent /> </ErrorBoundary>
1.2. 注意事项
- 可以使用多个错误边界来包装一个组件树，从而捕获不同等级的错误。
- 错误边界无法捕获以下情况中的错误：
- 事件处理程序（尝试在错误的 DOM 元素上设置事件处理程序）。
- 异步代码（例如
setTimeout或requestAnimationFrame回调函数）。 - 服务端渲染。
- 错误边界在开发模式下不会捕获错误。如果要测试错误边界，请确保在生产模式下进行。
2. 捕获 Promise 错误
在 JavaScript 中，Promise 错误不会自动抛出，因此在处理 Promise 链时，可能会在无法正常处理 Promise 包装的异步操作时遇到问题。这时可以通过 window.addEventListener() 来全局捕获 Promise 错误。代码如下：
window.addEventListener('unhandledrejection', function(event) { console.error('Unhandled promise rejection:', event.reason); });
但是这种方法有一个重大的缺点：它无法区分不同的 Promise 错误。为了从代码中清晰地、特定地处理每个 Promise 链，请改用 catch() 方法：
somePromise .then(() => { // 处理 resolve 的情况 }) .catch(error => { console.error('Error:', error); });
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
