与Router / withStyles和mobx的观察者结合使用时，反应不正确的渲染

问题描述

我正在用mobx构建一个React应用。 withRouter和withStyles一切正常，因为我需要访问商店，因此我在组件中添加了store作为observer中的包装。但是自从完成此操作后，渲染在其子组件上停止正常工作。我应该如何正确访问商店？

编辑：找到了一种使用@observer在组件中注入存储的方法 简化代码：

@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>
)}}

包装器：

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

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

解决方法

目前，您的Observer根本无法从observer装饰器中受益，因为observer仅在某些可观察的属性更改时才会重新渲染，但是存储本身是不可观察的，并且可能永远不会改变。

您需要做的是将PersistentDrawerLeft用observer包裹

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