如何解决React报错：TypeError: Cannot read property 'showModel' of null

结合你提供的代码，共有3处需修正的错误，按优先级排序如下：

• 1. 主组件state命名错误（直接导致当前报错）
  React类组件的状态属性名固定为小写的state，你在Main.js的构造函数中错误将首字母大写为State，导致默认的this.state为null，调用this.state.showModel时就会触发空对象属性读取报错。
  修正Main.js构造函数代码：

constructor(props) {
    super(props);
    // 原错误代码：this.State = {
    // 修正为小写state
    this.state = {
        userName: '',
        userHeight: '',
        likeCats: false,
        breed: '',
        showModel: false
    }
}

• 2. 子组件props属性名拼写错误
  你在Main组件中给UserDataModel传递的属性名为showModel，但在UserDataModel.js中调用时错误拼写为末尾大写的showModal，会导致弹窗无法正常显示。
  修正UserDataModel.js中Modal组件的show属性：

// 原错误代码：<Modal show={this.props.showModal} onHide={this.props.handleClose}>
// 修正为和传参一致的属性名
<Modal show={this.props.showModel} onHide={this.props.handleClose}>

• 3. 子组件关闭事件名拼写错误
  你传递的关闭方法属性名为handleClose，但子组件中调用时错误写为全小写的handleclose，大小写不一致会导致点击关闭按钮无响应。
  修正UserDataModel.js中关闭按钮的点击事件：

// 原错误代码：<Button variant="secondary" onClick={this.props.handleclose}>
// 修正为和传参一致的方法名
<Button variant="secondary" onClick={this.props.handleClose}>

可选优化 #

React的setState方法本身不是Promise类型，不需要用async/await包裹，你可以删掉submitForm方法的async前缀和setState前的await，减少不必要的异步处理。

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