javascript - 使用redux打开状态时Material-ui对话框闪烁

Question

我正在尝试将 material-ui 对话框的打开状态移动到 redux，以防止它在发生重新渲染时关闭，但是在发生重新渲染时我遇到了对话框问题。尽管状态保存在 redux 中，并且每当重新渲染发生时对话框确实保持打开状态，但打开状态保持打开状态，但对话框确实显示打开动画(淡入)，这有点烦人。

Students.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:发现它与来自redux的打开状态无关，如果我使用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
});

Answer 1

感谢@RyanCogswell，我发现了问题!

对于任何有同样问题的人来说，这是我的原因和修复:

我将组件传递给 Route 组件，如下所示:

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

通过这样做，我可以通过我的 privateRoute 函数传递 Prop ，但是如果您在普通 Route 组件中以这种方式发送组件，也会发生这种情况

对我来说，解决方案只是将 selectedIndexSecondary 移动到 redux 并以正常方式发送组件，它会阻止重新安装。

所以只要这样做就可以防止这种情况发生。

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

这也将解决组件中的本地状态从重置为默认值的问题。所以对我来说它解决了两个问题!