Почему при изменении состояния здесь, в codeandbox, здесь не происходит перезагрузка / рендеринг / рисование страницы. Я также добавил комментарии, в которых я не понимаю
https://codesandbox.io/s/material-demo-nb5ek?file= / demo. js
Я сделал то же самое в моем случае в соответствии с материалом закусочной панели пользовательского интерфейса документация: Единственная разница в том, что я передаю функцию щелчка дочернему элементу и вызываю его оттуда.
Я создал материальную снэк-панель пользовательского интерфейса в родительском элементе, который является функциональным компонентом, и передаю функцию уведомления в Маршруте, показанном ниже, в дочерний элемент, который также является функциональным компонентом.
const [openNotification, setOpenNotification] = React.useState(false);
const handleClose = (event, reason) => {
if (reason === 'clickaway') {
return;
}
setOpenNotification(false);
};
const notification = (status) => {
setOpenNotification(status)
}
const PrivateRoute = ({ component: Component, ...rest }) => (
<Route exact {...rest} render={(props) => (
<Component {...props} notification={notification}/>
)} />
)
Это HTML, где я использую его в родительском элементе.
<Snackbar
anchorOrigin={{
vertical: 'bottom',
horizontal: 'left',
}}
open={openNotification}
autoHideDuration={6000}
onClose={handleClose}
message='Success'
action={
<React.Fragment>
<IconButton size="small" aria-label="close" color="inherit" onClick={handleClose}>
<CloseIcon fontSize="small" />
</IconButton>
</React.Fragment>
}
/>
В дочернем я использовал функцию уведомления как это в функции отправки.
function handleSubmit() {
props.notification(true)
}
Проблема: страница отображается при закрытии закусочной, и я не хочу, чтобы это происходило, поскольку это просто уведомление. Я знаю, что у снекбара есть связанное с ним состояние, которое меняется с истинного на ложное. Хотя приведенный здесь пример не отображает страницу снова из песочницы документации при закрытии закусочной: https://codesandbox.io/s/5tgvq. Ссылка на документацию по простой закусочной: https://material-ui.com/components/snackbars/
Я попытался не использовать для него состояние, а просто создать переменную и обновить ее. Но тогда закусочная не откроется, даже если значение станет истинным