Я пытаюсь использовать снэк-бар пользовательского интерфейса для отображения всплывающих ошибок в моем приложении реакции.
Я использую представление контейнера. С этой точки зрения, он делает некоторые вещи, и ошибки могут быть брошены. Если это действительно приводит к ошибке, я хочу отобразить свой пользовательский компонент панели закусок.
Это мой компонент ErrorPopup:
import React from 'react';
import { Snackbar } from '@material-ui/core';
import MuiAlert, { AlertProps } from '@material-ui/lab/Alert';
function Alert(props: AlertProps) {
return <MuiAlert elevation={6} variant="filled" {...props} />;
}
interface ErrorProps {
message: string;
}
export default function ErrorPopup(props: ErrorProps) {
const [open, setOpen] = React.useState(true);
const handleClose = () => {
setOpen(false);
};
return (
<div>
{props.message !== '' ? (
<Snackbar open={open} autoHideDuration={6000} onClose={handleClose}>
<Alert onClose={handleClose} color="error">
{props.message}
</Alert>
</Snackbar>
) : (
''
)}
</div>
);
}
В моем главном представлении я вызываю этот компонент так:
<ErrorPopup message={this.state.errors} />
Кажется, что происходит, что я получаю ошибки, которые, как мне кажется, что-то указывают на проблему WithStyles + машинопись всплывает, но я не в полной мере понимаю, что это такое продолжается. Я просто ожидал, что это сработает, так как все мои материалы в пользовательском интерфейсе работали до сих пор.
Я попробовал несколько быстрых и вставляющих исправлений типа пистолета из net (как у вас), но я точно не знаю, что именно происходит, поэтому мне нужно хотя бы начать там.
Вот снимок экрана:
Возможно, с ошибками стилей?
- Во-первых, подходит ли этот подход к отображению ошибок нормально?
- Во-вторых, кто-нибудь может указать мне правильное направление здесь?