当前位置：首页 > React

react如何抛异常

2026-02-11 18:24:31React

抛出异常的方法

在React中抛出异常可以通过JavaScript的throw语句实现。React组件中的异常处理与普通JavaScript代码类似，但需要注意生命周期和渲染阶段的异常捕获。

function MyComponent() {
  const [data, setData] = useState(null);

  if (!data) {
    throw new Error('Data is required');
  }

  return <div>{data}</div>;
}

错误边界处理

React 16+引入了错误边界（Error Boundary）概念，可以捕获子组件树中的JavaScript异常。需要创建一个继承自React.Component的类组件并实现componentDidCatch生命周期方法。

class ErrorBoundary extends React.Component {
  state = { hasError: false };

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

  componentDidCatch(error, errorInfo) {
    console.error('Caught error:', error, errorInfo);
  }

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

使用示例

将可能抛出异常的组件包裹在错误边界中：

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

异步代码中的异常处理

对于异步操作（如API调用），需要使用try/catch块捕获异常：

async function fetchData() {
  try {
    const response = await fetch('/api/data');
    if (!response.ok) {
      throw new Error('Network response was not ok');
    }
    return await response.json();
  } catch (error) {
    console.error('Fetch error:', error);
    throw error; // 重新抛出以便上层处理
  }
}

自定义错误类型

可以创建继承自Error的自定义错误类，提供更详细的错误信息：

react如何抛异常

class ValidationError extends Error {
  constructor(message, field) {
    super(message);
    this.name = 'ValidationError';
    this.field = field;
  }
}

function validateInput(input) {
  if (!input) {
    throw new ValidationError('Input is required', 'input');
  }
}