React Material-ui Dialog的open属性失效，点击Fab无法弹出对话框

核心问题出在shouldComponentUpdate方法上：你当前只判断了words状态是否变化，当点击Fab修改dialog状态时，这个方法会返回false，导致组件不会重新渲染——即便dialog的状态已经改变，页面也不会同步更新Dialog的显示状态。

修复方案 #

方案1：扩展状态判断逻辑 #

修改shouldComponentUpdate，把所有需要触发重渲染的状态都加入判断条件：

shouldComponentUpdate(nextProps, nextState) {
    return nextState.words !== this.state.words || 
           nextState.dialog !== this.state.dialog ||
           nextState.word !== this.state.word ||
           nextState.weight !== this.state.weight;
}

方案2：移除不必要的渲染拦截 #

如果你的组件不需要针对words做特定的渲染优化，直接删掉shouldComponentUpdate方法即可。React会自动根据所有状态变化触发重渲染，Dialog的显示/隐藏就能正常响应。

额外优化：简化事件绑定 #

你在Fab的onClick中重复绑定了this（既在constructor里绑定过，又用箭头函数定义了方法），可以直接简化为：

<Fab color="primary" className={classes.fab} onClick={this.handleDialogToggle}>
    <AddIcon />
</Fab>

内容的提问来源于stack exchange，提问作者hongbuly