使用Material-UI与Mobx时遇capitalize参数错误，求解决方案

这个报错的根源很明确：Material-UI的Snackbar组件内部的capitalize工具函数需要接收字符串参数，但你的Mobx状态里给vertical/horizontal传了null、undefined或者不合法的半完成字符串，导致函数触发参数校验错误。

具体问题点 #

• 初始状态不合法：你设置了vertical: null，当组件尝试读取这个值时，capitalize收到null而非字符串，直接报错。
• 切换状态时属性缺失：在toggleSnackState的else分支里，你只给vertical赋值了不完整的'to...'，还完全没设置horizontal，这会让该属性变成undefined，同样触发capitalize的参数校验。

修复后的代码 #

先修正初始状态，给vertical和horizontal设置Material-UI认可的合法默认值：

@observable snackbarState = { 
  open: false, 
  vertical: 'bottom', // 可选值：'top'/'bottom'
  horizontal: 'center' // 可选值：'left'/'right'/'center'
};

再优化toggleSnackState方法，确保状态切换时属性完整且合法：

@action toggleSnackState(){
  if(this.snackbarState.open){ 
    // 直接判断open状态更直观，不用依赖vertical
    this.snackbarState = { 
      ...this.snackbarState, // 复用默认的vertical/horizontal，减少重复代码
      open: false 
    };
    console.log('excuted','hidden')
  }else{
    console.log('excuted')
    this.snackbarState = { 
      open: true, 
      vertical: 'top', // 替换为合法的字符串值
      horizontal: 'right' // 补充合法的horizontal值
    };
  }
}

额外说明 #

• Material-UI的Snackbar对vertical和horizontal有严格的参数要求，必须是指定的字符串值，不能传null、undefined或者自定义的无效值。
• 隐藏Snackbar时，只需要把open设为false即可，其他属性可以复用默认值，因为此时组件不会渲染，不会触发参数校验。

内容的提问来源于stack exchange，提问作者WEN-JY