Блог

Я пытаюсь отобразить баннер с сообщением об ошибке в верхней части страницы/компонента, который выдает ошибку. Ошибка вызвана вызовом API, поэтому я использую как крючок, так и компонент из react-error-boundary.

Я могу поймать ошибку и отобразить баннер, но я не могу понять, как отобразить его в верхней части страницы вместо того, чтобы заменять все целиком. Я думал, что это то, что должен делать fallbackRender, но он по-прежнему показывает баннер и ничего больше.

Это упрощенная версия моей текущей настройки:

AlertBanner.js

     const AlertBanner = ({ error }) => {
      return <Container >{error}</Container>;
    };
 

App.js

   import { ErrorBoundary } from "react-error-boundary";
    const App = () => {
      return (
       <ErrorBoundary fallbackRender={AlertBanner}>
         <Login />
       </ErrorBoundary>
      )
    }
 

Login.js

  const Login = () => {
 const handleError = useErrorHandler();
 const login = () => {
loginService.login(credentials).then(setUser, handleError);
                  };
 return (
    <div className={classes.container}>
      <FullScreenImage />
      <form className={classes.login} onSubmit={handleSubmit}>
      // [...]
      </form>
    </div>
  );