React与使用Bootstrap5模态框的注意事项

这是一个依靠全局状态的组件Login,通过监听props变化(react-redux),来实现是否隐藏Bootstrap模态框

//Index.js组件  
//...
  loginModel = null;

  componentDidMount(){
    this.loginModel = new bootstrap.Modal(document.getElementById('loginModel'));
  }
  //...
  componentWillReceiveProps(props) {
    //监听是否打开登录框
    if(props.showlogin){
      this.loginModel.show();
    }else{
      this.loginModel.hide();
    }
  }

同时,登录完成将Model隐藏: 使用this.loginModel.hide();但是,发现这样使用的话是错误的:

unstable_flushDiscreteUpdates: Cannot flush updates when React is already rendering.

之后我将其改为this.props.showLogin(false);(通过dispatch修改全局state的showlogin属性);以继续使用componentWillReceiveProps来控制Model的显示或关闭;

我的想法是可能由于Login根节点就是id=loginModel;在自定义方法里使用了this.loginModel.hide就报错,而在componentWillReceiveProps中使用就不会;(强行解释)

但报错具体原由暂不清楚,懂得伙伴希望能解释一下啦。