React Incorrect render when combine withRouter/withStyles and mobx's observer

Question

I'm building an react app with mobx. Everything was working fine with withRouter and withStyles, since I need to access the store, so I added store to the component as a wrapper in observer. But since I've done that, the rendering stopped working correctly on its child component. How should I access the store correctly?

Edit: Found one way to inject store in the component with @observer simplified code:

@observer
class PersistentDrawerLeft extends Component {

  constructor(props) {
    super(props);
    this.state = {
      open: true,
    }
  }

  toggle = () => {
    this.setState({ open: !this.state.open })
  }

  routeTo = (path) => () => {
    this.props.history.push(path)
  }

  onRoute = (route) => {
    if (typeof window !== 'undefined') {
      if (route === '/' && window.location.hash === '#/') return true; // home route
      if (route !== '/' && window.location.hash !== '#/' && window.location.hash.indexOf(route.toLowerCase().replace('/', '')) !== -1) return true;
    }
    return false;
  }

render() {
    const { open } = this.state;
    const { classes } = this.props;

    return (
      <div className={classes.root}>
        <CssBaseline />
        <AppBar
          position="fixed"
          className={clsx(classes.appBar, {
            [classes.appBarShift]: open,
          })}
        >
          <Toolbar>
         
          </Toolbar>
        </AppBar>
        <Drawer
          className={classes.drawer}
          variant="persistent"
          anchor="left"
          open={open}
          classes={{
            paper: classes.drawerPaper,
          }}
        >
          <div className={classes.drawerHeader}>
            <IconButton onClick={this.toggle}>
              <ChevronLeftIcon />
            </IconButton>
          </div>
          <Divider />
          <List>
           <ListItem button onClick={this.routeTo(routes.TOKEN)}>
              <ListItemIcon className={this.onRoute(routes.TOKEN) ? classes.active : classes.passive}><EmojiEmotionsIcon /></ListItemIcon>
              <ListItemText className={this.onRoute(routes.TOKEN) ? classes.active : classes.passive} primary={"Token"} />
            </ListItem>
          </List>
        </Drawer>
        <main
          className={clsx(classes.content, {
            [classes.contentShift]: open,
          })}
        >
          <div className={classes.drawerHeader} />
          {this.props.children}
        </main>
      </div>
)}}

Wrapper:

const Wrapped = withRouter(withStyles(styles)(PersistentDrawerLeft));

export default function Observer () {
  const store = useStores()
  return (<Wrapped store={store} />)
});

score 0 · Answer 1 · answered Sep 03 '20 at 19:34

Right now your Observer does not benefit from observer decorator at all, since observer will only rerender if some observable property change, but store itself is not observable and it will probably never change.

What you need to do is wrap PersistentDrawerLeft with observer

const Wrapped = withRouter(withStyles(styles)(observer(PersistentDrawerLeft)));

React Incorrect render when combine withRouter/withStyles and mobx's observer

1 Answers1