Мигающий диалог Material-ui при использовании приставки для открытого состояния - PullRequest
Новая
       43

Мигающий диалог Material-ui при использовании приставки для открытого состояния

1 голос
/ 10 апреля 2020

Я пытаюсь переместить открытое состояние диалогового окна material-ui в режим редукции, чтобы предотвратить его закрытие при повторном отображении, но у меня возникли проблемы с диалоговым окном при повторном отображении. Несмотря на то, что состояние сохраняется в Redux, и диалоговое окно остается открытым всякий раз, когда происходит повторное отображение, открытое состояние остается открытым, но диалоговое окно отображает открытую анимацию (постепенное появление), что несколько раздражает.

Студенты. js (родительский компонент модального) 

const Students = ({
    app: { studentsPage: { savedAddDialogOpen }},
  setStudentsPageAddDialogOpen}) => {

    // Create the local states
    const [dialogOpen, setDialogOpen] = React.useState(savedAddDialogOpen);
    const dialogOpenRef = React.useRef(savedAddDialogOpen);

    // Change redux dialog open
    const setReduxDialogState = () => {
      setStudentsPageAddDialogOpen(dialogOpenRef.current, savedAddDialogOpen);
    };

    // Open add student dialog
    const dialogClickOpen = () => {
      setDialogOpen(true);
      dialogOpenRef.current = true;
      setTimeout(() => setReduxDialogState(), 300);
    };

    // Close add student dialog
    const dialogClose = () => {
      setDialogOpen(false);
      dialogOpenRef.current = false;
      setTimeout(() => setReduxDialogState(), 300);
    };

    return (
      <Container>
        {/* Add student modal */}
        <AddStudentModal dialogOpen={dialogOpen} dialogClose={dialogClose} />
      </Container>
    )

}

// Set the state for this component to the global state
const mapStateToProps = (state) => ({
  app: state.app,
});

AddStudentModal. js

const AddStudentModal = ({
    dialogOpen, dialogClose
    }) => {

    return (
      <Dialog
        open={dialogOpen}
      >
        {/* Lots of stuff*/}
        <DialogActions>
          <Button onClick={dialogClose}>
            Close dialog
          </Button>
        </DialogActions>
      </Dialog>
    )
};

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

Любая помощь будет принята с благодарностью.

Редактировать 1: Обнаружено, что она не имеет никакого отношения к открытому состоянию, полученному из избыточного кода, если я использую open = {true}, она все еще мигает, так что, вероятно, проблема с самим Material-UI?

Редактировать 2: PrivateRoute. js

const PrivateRoute = ({
  auth: { isAuthenticated, loadingAuth },
  user: { loggedInUser },
  component: Component,
  roles,
  path,
  setLastPrivatePath,
  ...rest
}) => {
  useEffect(() => {
    if (path !== '/dashboard' && path !== '/profile') {
      setLastPrivatePath(path);
    }
    // Prevent any useless errors with net line:
    // eslint-disable-next-line
  }, [path]);

  // If we are loading the user show the preloader
  if (loadingAuth) {
    return <Preloader />;
  }

  // Return the component (depending on authentication)
  return (
    <Route
      {...rest}
      render={props =>
        !isAuthenticated ? (
          <Redirect to="/login" />
        ) : (loggedInUser && roles.some(r => loggedInUser.roles.includes(r))) ||
          roles.includes('any') ? (
          <Component {...props} />
        ) : (
          <NotAuthorized />
        )
      }
    />
  );
};

// Set the state for this component to the global state
const mapStateToProps = state => ({
  auth: state.auth,
  user: state.user
});

1 Ответ

0 голосов
/ 10 апреля 2020

Я нашел проблему благодаря @RyanCogswell!

Для тех, у кого есть такая же проблема, вот причина для меня и исправления:

Я передавал компоненты в компонент Route следующим образом: 

<PrivateRoute
   exact
   path={'/dashboard/students'}
   component={(props) => (
     <Students {...props} selectedIndex={selectedIndexSecondary} />
   )}
   roles={['admin']}
/>

Делая таким образом, я мог бы передавать реквизиты через свою функцию privateRoute, но это также могло бы произойти, если вы отправляете компонент таким способом в обычном компоненте Route

Для меня решение - просто переместить selectedIndexSecondary вужный и отправить компонент обычным способом это предотвратило перемонтирование.

Так что, если вы просто сделаете это, то этого не произойдет. 

<PrivateRoute
   exact
   path={'/dashboard/students'}
   component={Students}
   roles={['admin']}
/>

Кроме того, это позволит локальным состояниям компонентов переустановить значение по умолчанию. Так что для меня это исправило две проблемы!

...