Material UI Snackback перезагружает страницу в функциональном компоненте - PullRequest
0 голосов
/ 16 июня 2020

Почему при изменении состояния здесь, в 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/

Я попытался не использовать для него состояние, а просто создать переменную и обновить ее. Но тогда закусочная не откроется, даже если значение станет истинным

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...