enter code hereI meet this error when I copied a react ponent from / and the state of this ponent are managed by Mobx like this:

 @observable snackbarState = {
    open: false,
    vertical: null,
    horizontal: null,
  };

@action toggleSnackState(){
    if(this.snackbarState.vertical){
        console.log('excuted','hidden')
        this.snackbarState={
            open: false,
            vertical: null,
            horizontal: null,
          };
    }else{
        console.log('excuted')
        this.snackbarState={
            open: true,
            vertical: 'top',
            horizontal: 'center',
          };
    }
}

and here is my snackbar.js:

import React,{Component} from 'react';
import PropTypes from 'prop-types';
import {PropTypes as MobxPropTypes} from 'mobx-react';
import { withStyles } from 'material-ui/styles';
import Snackbar from 'material-ui/Snackbar';
import IconButton from 'material-ui/IconButton';
import CloseIcon from '@material-ui/icons/Close';
import {observer} from 'mobx-react'
const styles = theme => ({
  close: {
    width: theme.spacing.unit * 4,
    height: theme.spacing.unit * 4,
  },
});
@observer 
class SimpleSnackbar extends Component {
    handleClose=()=>{
        console.log(this.context,'---from snackbar')
       this.context.store.toggleSnackState();
    }
  render() {
    const { classes } = this.props;
    let { vertical, horizontal ,open} = this.context.store.snackbarState;
    return (
      <div>
        <Snackbar
          anchorOrigin={{ vertical, horizontal }}
          open={open}
          autoHideDuration={6000}
          onClose={this.handleClose}
          SnackbarContentProps={{
            'aria-describedby': 'message-id',
          }}
          message={<span id="message-id">这里是消息内容</span>}
          action={[
            <IconButton
              key="close"
              aria-label="Close"
              color="inherit"
              className={classes.close}
              onClick={this.handleClose}
            >
              <CloseIcon />
            </IconButton>,
          ]}
        />
      </div>
    );
  }
}
SimpleSnackbar.contextTypes={
    store:MobxPropTypes.observableObject.isRequired
}
SimpleSnackbar.propTypes = {
  classes: PropTypes.object.isRequired,
};
export default withStyles(styles)(SimpleSnackbar);

and when I click the closeButton ,The error was throwwed from my console:

 - excuted
 - snackbar.js:18 {store: MyState} "---from snackbar"
 - state.js:58 excuted hidden
 - Error: Material-UI: capitalize(string) expects a string argument.

is there anything wrong with my usage of mobx?help please!

enter code hereI meet this error when I copied a react ponent from https://material-ui-next./demos/snackbars/ and the state of this ponent are managed by Mobx like this:

 @observable snackbarState = {
    open: false,
    vertical: null,
    horizontal: null,
  };

@action toggleSnackState(){
    if(this.snackbarState.vertical){
        console.log('excuted','hidden')
        this.snackbarState={
            open: false,
            vertical: null,
            horizontal: null,
          };
    }else{
        console.log('excuted')
        this.snackbarState={
            open: true,
            vertical: 'top',
            horizontal: 'center',
          };
    }
}

and here is my snackbar.js:

import React,{Component} from 'react';
import PropTypes from 'prop-types';
import {PropTypes as MobxPropTypes} from 'mobx-react';
import { withStyles } from 'material-ui/styles';
import Snackbar from 'material-ui/Snackbar';
import IconButton from 'material-ui/IconButton';
import CloseIcon from '@material-ui/icons/Close';
import {observer} from 'mobx-react'
const styles = theme => ({
  close: {
    width: theme.spacing.unit * 4,
    height: theme.spacing.unit * 4,
  },
});
@observer 
class SimpleSnackbar extends Component {
    handleClose=()=>{
        console.log(this.context,'---from snackbar')
       this.context.store.toggleSnackState();
    }
  render() {
    const { classes } = this.props;
    let { vertical, horizontal ,open} = this.context.store.snackbarState;
    return (
      <div>
        <Snackbar
          anchorOrigin={{ vertical, horizontal }}
          open={open}
          autoHideDuration={6000}
          onClose={this.handleClose}
          SnackbarContentProps={{
            'aria-describedby': 'message-id',
          }}
          message={<span id="message-id">这里是消息内容</span>}
          action={[
            <IconButton
              key="close"
              aria-label="Close"
              color="inherit"
              className={classes.close}
              onClick={this.handleClose}
            >
              <CloseIcon />
            </IconButton>,
          ]}
        />
      </div>
    );
  }
}
SimpleSnackbar.contextTypes={
    store:MobxPropTypes.observableObject.isRequired
}
SimpleSnackbar.propTypes = {
  classes: PropTypes.object.isRequired,
};
export default withStyles(styles)(SimpleSnackbar);

and when I click the closeButton ,The error was throwwed from my console:

 - excuted
 - snackbar.js:18 {store: MyState} "---from snackbar"
 - state.js:58 excuted hidden
 - Error: Material-UI: capitalize(string) expects a string argument.

is there anything wrong with my usage of mobx?help please!

• javascript
• reactjs
• material-ui
• mobx
• mobx-react

1 Answer 1

Mobx will wrapp all primitives in objects. This is the only way it can observe primitive values. Because your snackbarState gets wrapped in an observable, also all of its descendants are wrapped in an object. So vertical and horizontal are strings wrapped in objects by mobx. Normally this wouldn't be a problem, but material ui checks in the capitalize method, if it is of type string. It isn't, because its of type object (a string wrapped in an object).

So you need to transform the observable back to a normal (non wrapped) js object.

import { toJS } from 'mobx';

let { vertical, horizontal, open} = toJS(this.context.store.snackbarState);

Please keep in mind, that toJS creates a clone of your object. So when you change this clone, observers won't update.

Further documentation:

• https://mobx.js/refguide/tojson.html