React自定义钩子-处理错误

import { useState, useEffect } from 'react';

function useErrorBoundary() {
  const [hasError, setHasError] = useState(false);
  const [error, setError] = useState(null);

  useEffect(() => {
    if (hasError) {
      // 可以在这里进行错误日志记录或其他处理
      console.error('Error caught by boundary:', error);
    }
  }, [hasError, error]);

  const triggerError = (err) => {
    setHasError(true);
    setError(err);
  };

  return { hasError, error, triggerError };
}

export default useErrorBoundary;

import React from 'react';
import useErrorBoundary from './useErrorBoundary';

function MyComponent() {
  const { hasError, error, triggerError } = useErrorBoundary();

  if (hasError) {
    return <div>Something went wrong: {error.message}</div>;
  }

  return (
    <div>
      <button onClick={() => triggerError(new Error('Test error'))}>Trigger Error</button>
    </div>
  );
}

export default MyComponent;