为什么在react组件中没有触发错误边界？
在React组件中没有触发错误边界的原因可能有以下几点：
- 错误边界的使用：错误边界是React 16引入的一个新特性，用于捕获并处理组件树中发生的JavaScript错误，防止整个应用崩溃。要在React组件中触发错误边界，需要使用ErrorBoundary组件将可能发生错误的子组件包裹起来，并在ErrorBoundary组件中定义错误处理逻辑。如果没有正确使用错误边界，就无法触发错误边界。
- 组件生命周期：React组件的生命周期方法中，并没有专门用于触发错误边界的方法。错误边界的触发是通过JavaScript错误捕获机制实现的，而不是通过组件生命周期方法。
- 错误边界的限制：错误边界只能捕获其子组件中的错误，而无法捕获自身组件中的错误。这意味着如果错误发生在React组件的根节点或错误边界组件本身，错误边界将无法捕获并处理该错误。
总结起来，要在React组件中触发错误边界，需要正确使用错误边界组件，并将可能发生错误的子组件包裹起来。同时，需要注意错误边界的限制，它只能捕获子组件中的错误，而无法捕获自身组件中的错误。如果没有正确使用错误边界或错误发生在根节点或错误边界组件本身，就无法触发错误边界。
相关·内容
我的团队正在从angularjs迁移到react。由于该项目不是使用react启动的，因此它没有根组件。我们开始使用react-component将react组件插入到angularjs中。这些react组件没有共同的父级。现在，我正在尝试将errorBoundary应用于我的react组件。一种显而易见的方法是用错误边界包装每个组件。这种方法的问题是，后来编写新react组件的人可能会忘记用错误边界包装新组件。有没有一种方法可以将误差边界作为一个整体应用于这些react组件/
谢谢
浏览 4提问于2019-09-27得票数 0
我正在遵循reactjs.org上的教程，并练习使用错误边界来捕获错误。我已经编写了自己的代码，类似于本教程的代码，但我发现边界不会重新呈现回退UI。我使用的是React的16.8.6版本。下面是我的代码：
ErrorBoundary.js：
import React from 'react'
export const ErrorContext = React.createContext({
error: null,
errorInfo: null,
clickCount: 0,
increment : () =>{},
})
export d
浏览 29提问于2019-07-26得票数 1
我在生产中得到了一个不可重现的错误，但我想找出是哪个组件导致了问题(理想情况下，是在该组件中的什么位置)。 但是，React production build错误堆栈跟踪仅在我将其映射到源映射后才存在于react.production.min.js和react-dom.production.min.js中。 有没有办法在这里找到导致问题的组件？
浏览 17提问于2021-08-11得票数 0
我似乎不能在代码中触发componentDidCatch，即使我故意在构造函数中抛出一个错误，所以我知道我不会将错误抛给事件处理程序。我担心的是，我没有成功地更新我的项目以响应16，这就是为什么componentDidCatch没有工作。是我没有成功升级到反应16，还是我误用了错误边界？
下面是我已经复习过的一些文章，我经常这样做：
App.js
import React, { Component } from 'react'
import axios from 'axios'
import ErrorBoundary from &#
浏览 0提问于2017-11-25得票数 2
回答已采纳
1回答
React将显示一个页面，当捕获错误时，该页面将报告开发模式中的错误和堆栈。
我尝试用error boundary component的componentDidCatch方法重新定义页面的UI。但这不像预期的那样。将在很短的时间内显示z-index.I默认用户界面，然后将默认用户界面覆盖到我的页面上。 React默认用户界面是在一个具有fixed位置和大值的<iframe>标记中实现的，该标签必须单击'x‘按钮，关闭React默认UI，然后让UI appear.实现。
有什么方法可以帮助我在开发模式下阻止默认UI的反应吗？
有什么方法可以帮助我在开发模式下重新定义Re
浏览 12提问于2022-09-30得票数 0
我正在尝试使用App.js中的以下方式使用window.onerror捕获react应用程序中并发的所有错误，包括事件处理程序错误
componentWillMount() {
this.startErrorLog();
}
startErrorLog() {
const {history} = this.props;
window.onerror = (message, file, line, column, errorObject) => {
column = column || (wi
浏览 0提问于2019-09-05得票数 2
我一直在试验一些组件，这些组件执行react-cache风格的事情，并在render方法中执行web服务调用，向React.Suspense组件抛出一个承诺，并在数据存在时重新呈现。它们调用web服务，检查响应，并根据响应将错误呈现或抛出到错误边界。我注意到，每当在组件中抛出错误时，它都会呈现两次。第一次调用堆栈看起来正常，第二次调用堆栈包含对invokeGuardedCallbackDev和invokeGuardedCallback的调用，这似乎与React确保错误出现在控制台中有关，即使在开发构建中被错误边界“捕获”。
我可以用react和react-dom 16.8.6重现这一点，只需像
浏览 0提问于2019-08-30得票数 7
请考虑以下几点：
function Welcome(props) {
return <h1>Hello World</h1>;
}
ReactDOM.render(<Welcome />, document.getElementById('root'));
// React.createElement(Welcome, null)
可以通过直接调用函数来实现同样的目的，而不是使用JSX：
ReactDOM.render(Welcome(), document.getElementById('root'));
现在我并不是
浏览 3提问于2020-11-06得票数 0
在这种情况下：
const A = () => (
<B
calc={() => {throw Error('error!')}
/>
);
const B = ({calc}) => (
<ErrorBoundry>
<div>result: {calc()}</div>
</ErrorBoundry>
);
(假设ErrorBoundry是典型的、简单的react文档形式的ErrorBoundry )我发现错误没有被错误边界捕获到。如果我将错误边界放在A中
co
浏览 1提问于2020-06-23得票数 1
当我没有登录时，我收到这个错误：
Unhandled Rejection (Error): GraphQL error: Refresh has expired
它出现在下面的代码块中：
const { loading, error, data } = useQuery(GET_BILLABLE_EVENTS, {
fetchPolicy: 'no-cache',
errorPolicy: 'ignore',
onError: (err) => {
console.log({ err });
},
});
浏览 21提问于2020-06-04得票数 1
我可以通过实现componentDidCatch在React中使用。
有没有一种干净的方法可以使功能组件成为错误边界而不将其转换为类？
或者这是代码的味道？
浏览 0提问于2018-01-28得票数 97
1回答
为什么componentDidCatch在我的react-native应用程序中不起作用。componentDidCatch不处理错误。
React native v: 50.3
React: 16.0.0
import React, {Component} from 'react';
import {View, Text} from 'react-native';
import Logo from './SignUpInit/Logo';
import SignUp from
浏览 0提问于2017-11-10得票数 8
回答已采纳
我们正在尝试使用react边界(v6)，但似乎需要用一个错误边界包装每个路由元素，如下所示
import { ErrorBoundary } from "react-error-boundary";
export const AppRoutes = createBrowserRouter([
{
path: "/",
element: <ErrorBoundary FallbackComponent={GlobalError}><Login /></ErrorBoundary>
},
{
path: "
浏览 16提问于2022-10-10得票数 1
我希望全局捕获React应用程序中的错误。
但每次错误被捕获/转发两次到我注册的函数。
示例代码：
window.onerror = (msg, url, lineNo, columnNo, error) => {
console.log(msg)
alert(msg)
}
class TodoApp extends React.Component {
constructor(props) {
super(props)
}
render() {
return (
<button onClick={(e)=>{
浏览 0提问于2018-05-06得票数 11
我对以下虚拟组件进行了一些测试，在执行过程中(在控制台中)，我得到了以下结果：
Rendering: 0
Triggered: 0
Rendering: 4
Triggered: 4
Rendering: 4
我很难理解为什么。
首次渲染：
将index设置为0。
运行useEffect，因为undefined不是0
useEffect请求将index设置为4
第二次渲染：
index是4
为什么useEffect身体会再次被执行？
第三次渲染：
为什么要重新渲染？
我期望的是：
Rendering: 0
Triggered: 0
浏览 1提问于2022-01-19得票数 2
回答已采纳
我们的应用程序使用捕捉错误。这很好，它在定义的位置显示了一个错误消息，就像它应该显示的那样。但是在错误表现出来后，路由停止工作，本质上破坏了应用程序！
我觉得这有点奇怪，因为这个应用程序似乎不起作用:当我单击链接和/或使用后退按钮时，DevTools显示routing/LOCATION_CHANGED动作被分派(我正在监听history对象)，url被更新，但没有呈现新的路由/屏幕。
由于React和Redux都在工作，所以我已经指出了React路由器，因为它是处理路由的主要组件。有人知道我怎样才能阻止它的破坏吗？
示例错误
此错误来自连接的组件，并发生在mapStateToProps中。
c
浏览 0提问于2019-08-26得票数 2
1回答
我的应用程序有一个用户输入一个查询来向Pokemon发出请求，并呈现响应数据。
如果用户输入数据库中不存在的查询，它将触发错误边界和Try Again按钮，通过重置查询状态从错误中恢复，并让用户重新提交不同的查询。这就是预期的行为。
但是，使用我当前的设置，当用户的查询没有任何匹配时，控制台将显示GET https://pokeapi.co/api/v2/pokemon/foo 404和Uncaught (in promise) Error: Request failed with status code 404。不过，用户没有看到此错误。没有什么可以告诉用户，他们的查询没有任何匹配。我的目标
浏览 6提问于2021-03-25得票数 1
回答已采纳
我在我的代码中使用了错误边界，当我在渲染主要布局组件的文件中使用它时，它是有效的，例如： <ErrorBoundary>
<header></header>
</ErrorBoundary>
<ErrorBoundary>
<main/> //this component has an error
</ErrorBoundary>
<ErrorBoundary>
<footer></footer>
</ErrorBoundary> 上面的代码可以正常工作，并针对
浏览 38提问于2021-07-03得票数 1
回答已采纳
当在React中呈现组件(包含许多子组件)时，无论出于何种原因，都会抛出JS错误，那么处理这种情况的最好方法是什么？当然，我可以捕获错误，但最终您想要呈现的东西可能无法捕获，因为缺少所需的信息。您可以在propTypes中使用.isRequired提前进行验证，但这只是在失败时控制台发出的警告。
浏览 0提问于2016-04-28得票数 39
在ErrorBoundary中，我想知道错误的原因。
例如，以下组件引发错误“未捕获TypeError:无法读取null的属性'foo‘”。
我想在ErrorBoundary中捕获此消息并记录它。但是，我可以获得组件的堆栈跟踪，但不能获得这样的错误。
有没有更好的方法呢？
组件：
const BugComponent = () => {
// set Null
const [value, setValue] = useState(null);
// "Uncaught TypeError: Cannot read property 'fo
浏览 18提问于2020-05-28得票数 1
1回答
我试图创建一个错误边界，但它不起作用。componentDidCatch没有开火。
我原以为会呈现回退UI，但实际上原来的UI仍然存在，什么也没有发生。
const SimpleBtn = lazy(() => import("./componentJsx/SimpleBtn.jsx"));
const SimpleBtn2 = lazy(() => import("./componentJsx/SimpleBtn2.jsx"));
class ErrorBoundary extends React.Component {
constructo
浏览 4提问于2022-07-15得票数 0
回答已采纳
在本例中，componentDidUpdate是在设置状态跟踪时触发的。HelloMessage道具和状态没有改变，所以为什么要调用这个方法？如何防止这种情况发生？
class HelloMessage extends React.Component {
componentDidUpdate(prevProps, prevState) {
console.log('HelloMessage did update');
}
render() {
return <div>Hellooo</div>;
}
}
class A
浏览 0提问于2018-08-17得票数 1
回答已采纳
我最近尝试了反应的错误边界。根据医生的反应-
错误边界的粒度取决于您。您可以包装顶级路由组件，以便向用户显示“出了问题”消息，就像服务器端框架经常处理崩溃一样。您还可以将单个小部件封装在错误边界中，以防止它们破坏应用程序的其余部分。
包装顶级路由是好的，解决了我的目的，但中断在一个组件，使其他组件的正确工作，并取代他们所有的错误边界的掉落UI。
例如，我有一个顶级的路由组件- <Component1 />，它呈现另外四个子组件-- <Component2 /> <Component3 /> <Component4 /> <Compo
浏览 2提问于2019-11-19得票数 6
回答已采纳
1回答
在Redux/React应用程序中，我使用生命周期方法componentDidCatch()来捕获和处理React UI呈现过程中的错误。有没有一种方法可以自动通知Redux存储在那里捕获的错误，而不需要调度操作？
浏览 13提问于2018-02-27得票数 0
回答已采纳
我正在学习如何使用componentDidCatch()。它向前看。它可以工作，但仍要在视图中显示完整的错误堆栈。
在单独的档案：
import React, { Component } from 'react'
class ErrorBoundary extends Component {
constructor(props) {
super(props);
this.state = {
hasError: false
}
}
componentDidCatch(error, info) {
console.log(
浏览 0提问于2018-01-20得票数 26
回答已采纳
2回答
我是reactjs的初学者，并且试图理解一些概念，比如父母和孩子在reactjs中呈现的内容和方式。
从研究中我发现，反应首先使孩子成为父母，但我却无法得到正确的答案--如何以及为什么？如果子程序不能呈现，我猜在react 16中有一个名为componentDidCatch的生命周期，如果子进程不能呈现，那么在react 16之前有什么，以及我们如何处理这些场景。
请帮帮我
浏览 1提问于2018-10-24得票数 7
回答已采纳
我正在开发一个应用程序，它在React组件中抛出一个错误，所以在控制台中有这样的错误：
React将尝试使用您提供的错误边界从头开始重新创建此组件树。
我真的不明白React为什么要这样做，因为它显然会导致无限的呈现循环(而且确实如此)，因为每次重新呈现时，错误都会不断发生。
所以我想知道，这种行为会在什么地方被破坏吗？我不知道是什么原因造成的，如果它只是反应或其他插件。任何帮助都将不胜感激。
浏览 0提问于2019-01-31得票数 13
我在努力让我的ErrorBoundary开始工作。
ErrorBoundary和大多数示例一样简单：
export class ErrorBoundary extends React.Component<IErrorBoundaryProps, IErrorBoundaryState> {
componentDidCatch(error: Error, errorInfo: Object): void {
this.setState({ catchedError: error });
}
render(): JSX.Element | Re
浏览 0提问于2018-04-25得票数 3
我正在尝试学习如何在类型转换环境中使用。我正在使用建议的模式。但是，在试图构建下面列出的代码时，我收到了以下错误：
道具验证中缺少“课程”
在道具验证中缺少“courses.map”
还有其他人经历过这种错误吗？这是来自eslint插件的一个衬里错误:react/推荐的吗？
在使用redux可观察的API检索数据时，我还很难理解从redux存储中初始化默认状态的过程。我有存储，史诗，还原剂，动作等配置从的模式建议。它们被配置为使用redux可观察的API获取课程列表。随后，我定义了三个动作和减速器: 1. FETCH_COURSES_ERROR 2. FETCH_COURSES_REQ
浏览 2提问于2019-10-26得票数 0
回答已采纳
App.js
import React from "react";
import CounterOne from "./CounterOne";
function App() {
const [display, setDisplay] = React.useState(true);
return (
<>
{display && <CounterOne />}
<button
onClick={() => {
setDisplay(!d
浏览 1提问于2021-01-28得票数 3
回答已采纳
4回答
如何捕获AWS放大错误？
、、、、
如果您考虑以下代码
React.useEffect(() => {
Auth.currentUserInfo()
.then((data) => {
if (data.username) {
//do something with data
}
})
.catch((error) => console.log('No logged in user'))
}, [])
当我查看我的控制台时，我看到所有这些都与我的控制台日志混在一起。
[ERROR] 14:14
浏览 22提问于2022-08-18得票数 6
2回答
不知道为什么，但是当从另一个函数访问方法时，模式没有关闭。我可以在组件中对该方法进行控制台日志记录，但该方法就是不起作用。 这是closeModal()函数所在的主ReviewsScreen.js import React, {Component} from 'react';
import {Modal} from 'react-native';
import {TouchableOpacity} from 'react-native';
import {View, Text, StyleSheet} from 'react-nativ
浏览 14提问于2021-04-09得票数 0
1回答
我正在尝试寻找一些预定义的钩子，这些钩子可以用于我的React应用程序的错误边界。我不想使用任何外部库支持，既然useEffect不能取代componentDidCatch，那么有什么办法可以解决这个问题吗？
浏览 4提问于2021-05-20得票数 1
在我的Hello.jsx组件中，我调用一个可能会失败的API。这里有一个假API叫做loader
import React, { useEffect } from "react";
export const Hello = () => {
const loader = async () => {
return Promise.reject("API error.");
};
useEffect(() => {
const load = async () => {
await loader();
浏览 9提问于2021-06-08得票数 6
回答已采纳
我有在中提到的默认错误边界，并且我有一个字典，它通常由我可以执行的函数填充。我在下面专门创建了一个测试用例，因为字典中不存在一个特定的函数，所以下面的测试用例会出错，我希望错误边界能够捕捉到这个错误，但是，它似乎不起作用，会发生什么呢？
应该出错的简单组件，但其部分仍应呈现：
export const App = () => {
return
<ErrorBoundary>
<Suspense fallback={<LoadingIcon/>}>
<div>t
浏览 6提问于2022-07-07得票数 0
我正在尝试使用React-Leaflet，以便仅在搜索栏中给定的位置周围显示标记。自然，每当地图加载时，我的数据库中的每个标记都会显示在整个地图上，而不仅仅是靠近给定位置的标记。
我确实尝试过使用边界和boundsOptions，认为它可以解决我的问题，但我只得到了一个错误，说有“太多的递归”。
下面是我使用的代码：
import React, { useState, useEffect, useContext } from 'react';
import MapsAPI from "../services/mapsAPI";
import { Map, Mar
浏览 2提问于2020-07-03得票数 0
我有一个使用react-router的组件屏幕，并且我经常使用参数location.key来标识我的路径和其他东西(location.pathname不能解决我的问题)。
但我意识到:当我第一次加载我的应用程序时，react-router没有location.key，为什么？是否有一些配置允许我更改此行为？
我正在使用"react-router-dom": "^5.0.0"并添加以下内容：
import { withRouter } from 'react-router-dom';
...
// to access
this.prop
浏览 43提问于2019-10-30得票数 2
我正在用React (用.renderToString())做一些服务器端渲染。我注意到，如果我发送一个对象而不是字符串来反应，它将完全失败，并发送此Invariant Violation: Objects are not valid as a React child错误。
有没有办法在组件级别捕获这个错误，这样如果发生这种情况，它就不会破坏我的整个网站？
到目前为止，我看到的唯一选择是检查我将要渲染的所有内容的类型。但我希望避免那些系统性的更改，因为它将非常冗长。
浏览 1提问于2018-05-22得票数 0
它处理什么样的错误，有什么真实的场景吗？
我读过这些文档，但是，它没有给出一个很好的例子，。
docs还提到它处理UI错误，但是UI错误可以在开发时解决，那么我们为什么需要“错误边界”呢？
浏览 0提问于2020-05-19得票数 2
1回答
在正式示例中，Timer组件使用this.interval
var Timer = React.createClass({
getInitialState: function() {
return {secondsElapsed: 0};
},
interval: null,
tick: function() {
this.setState({secondsElapsed: this.state.secondsElapsed + 1});
},
componentDidMount: function() {
this.interval = s
浏览 4提问于2014-09-16得票数 1
回答已采纳
2回答
我正在尝试制作一个输入组件，它将由react控制，并在属性发生变化时更新它的值。 我是这样做的： import React from 'react';
function Component(props) {
const [url, setUrl] = React.useState(props.value);
React.useEffect(() => {
setUrl(props.value);
}, [props.value]);
function handleChange(event) {
setUrl(event.target
浏览 17提问于2019-12-23得票数 2
回答已采纳
我创造了一个非常基本的反应间隔。
import React, {useState, useEffect} from 'react';
const Loading2 = () => {
const [percentage, setPercentage] = useState(0);
useEffect(() => {
const timer = setInterval(() => {
setPercentage((prevPerc) => {
if(percenta
浏览 10提问于2021-08-31得票数 1
回答已采纳
今天，我发现了一件意想不到的事情。这种情况不会发生在happen或其他JS库/框架中。但今天，当没有触发生命周期方法时，我感到震惊。背后有黑客吗。让我们看看密码。
我有一个组件A
import React, { Component } from 'react'
class A extends Component {
componentDidMount() {
console.log('component mount', this.props.name);
}
render() {
return (
<>
浏览 4提问于2020-06-16得票数 0
3回答
简单反应计数器
、、、、
我刚开始学习React，并选择使用Visual的.NET + React模板，该模板在.tsx文件中给了我这段代码，演示了如何制作一个简单的按钮来增加计数器：
import * as React from 'react';
import { RouteComponentProps } from 'react-router';
interface CounterState
{
currentCount: number;
}
export class Home extends React.Component<RouteComponentProps&
浏览 2提问于2018-02-14得票数 3
回答已采纳
我的error边界使用来自i18next的useTranslation钩子捕获到错误。由于这个错误边界，我无法获得正确的错误文本。刚收到类似“上述错误发生在...”之类的文本。你能告诉我为什么会这样吗？ 这一行的问题： const {t} = useTranslation(); i18配置： import i18next from "i18next";
import {initReactI18next} from "react-i18next";
import HttpApi from "i18next-http-backend";
impor
浏览 109提问于2021-09-01得票数 0
回答已采纳
1回答
反应错误边界不捕获错误
、、、、
我的react应用程序是从vite创建的，在那里，我的自定义React错误边界组件从组件中包装，问题是它不能捕获错误。我调试错误组件，但是它不能在getDerivedStateFromError而不是componentDidCatch中接收任何值。
这是我的错误边界代码：
/* eslint-disable @typescript-eslint/no-unused-vars */
import React, { Component } from 'react';
interface IState {
hasError: boolean;
eventId?: strin
浏览 21提问于2022-06-10得票数 1
2回答
React中的节流
、、、、
令我惊讶的是，下面这段在我的React组件类中限制mousemove的代码并没有像预期的那样工作，状态总是报告为真& mousemove继续被连续触发。我不明白为什么会这样。
class SVGParent extends React.Component {
constructor(){
super( props );
...
this.dispatchMouseMoveThrottle = this.dispatchMouseMoveThrottle.bind( this );
}
...
dispatchMo
浏览 12提问于2017-04-29得票数 0
我有两个组件来演示我的问题：
父级：
import React from "react";
import ReactDOM from "react-dom";
import { Grid, Row } from "react-flexbox-grid";
import Hello from "./Hello";
class App extends React.Component {
state = {
name: "Michal"
};
componentDidMount = () =>
浏览 0提问于2020-07-23得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
即时通信 IM
实时音视频活动推荐
腾讯云开发者
