当前位置：首页 > React

react如何抛异常

2026-02-26 04:32:15React

React 中抛出异常的方法

在 React 中抛出异常可以通过 JavaScript 的原生 throw 语句实现，同时结合 React 的错误边界（Error Boundaries）机制来捕获和处理异常。

使用 throw 抛出异常

直接使用 JavaScript 的 throw 抛出异常，适用于同步代码或异步代码中的错误处理。

function throwErrorExample() {
  throw new Error('This is a custom error message');
}

在 React 组件中调用此函数会触发异常：

react如何抛异常

function MyComponent() {
  throwErrorExample();
  return <div>This will not render due to the error</div>;
}

在异步代码中抛出异常

在异步操作（如 fetch 或 Promise）中抛出异常需要使用 try/catch 或 Promise.catch。

async function fetchData() {
  try {
    const response = await fetch('https://api.example.com/data');
    if (!response.ok) {
      throw new Error('Network response was not ok');
    }
    return response.json();
  } catch (error) {
    console.error('Fetch error:', error);
    throw error; // 重新抛出异常
  }
}

结合错误边界捕获异常

React 的错误边界是一种组件，可以捕获子组件树中的 JavaScript 异常并显示备用 UI。

react如何抛异常

class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }

  static getDerivedStateFromError(error) {
    return { hasError: true };
  }

  componentDidCatch(error, errorInfo) {
    console.error('Error caught by boundary:', error, errorInfo);
  }

  render() {
    if (this.state.hasError) {
      return <h1>Something went wrong.</h1>;
    }
    return this.props.children;
  }
}

使用错误边界包裹可能抛出异常的组件：

function App() {
  return (
    <ErrorBoundary>
      <MyComponent />
    </ErrorBoundary>
  );
}

在事件处理函数中抛出异常

事件处理函数中的异常不会被错误边界捕获，需手动处理。

function handleClick() {
  try {
    throw new Error('Event handler error');
  } catch (error) {
    console.error('Error in event handler:', error);
  }
}

function Button() {
  return <button onClick={handleClick}>Click me</button>;
}

在 useEffect 中抛出异常

useEffect 中的异常可以通过错误边界捕获，但需注意异步代码的处理。

function EffectComponent() {
  useEffect(() => {
    fetchData().catch(error => {
      console.error('Effect error:', error);
    });
  }, []);
  return <div>Check console for errors</div>;
}