import React, { useState } from 'react';
import MakeError from '../error/MakeError';
import { ErrorFallback } from '../ErrorFallback';
import { ErrorBoundary } from '../index';

const FallbackRenderExample = () => {
  const [hasError, setHasError] = useState(false);

  const onError = (error) => {
    // 日志上報
    console.log(error);
    setHasError(true);
  };

  const onReset = () => {
    console.log('尝试恢复错误');
    setHasError(false);
  };

  return (
    <ErrorBoundary
      fallbackRender={(fallbackProps) => <ErrorFallback {...fallbackProps} />}
      onError={onError}
      onReset={onReset}
    >
      {!hasError ? <MakeError /> : null}
    </ErrorBoundary>
  );
};

export default FallbackRenderExample;
