未知の型エラー：nullのプロパティ 'showModal'を読み取ることができません

Question

次のコードhereを取得し、ログインをモーダルにリファクタリングしようとしています。

Uncaught TypeError: Cannot read property 'showModal' of null 

はここに私のNavigation.js

import React, { Component, PropTypes } from 'react'; 
import { Button, Modal, Nav, Navbar } from 'react-bootstrap'; 
import { IndexLinkContainer } from 'react-router-bootstrap'; 
import Login from '../Login/Login'; 
import Logout from '../Logout/Logout'; 
import { loginUser, logoutUser } from '../../actions/actions' 
import './Navigation.css' 

export default class Navigation extends Component { 

    constructor(props, context) { 
     super(props, context); 

     this.state = { 
      showModal: false 
     }; 
    } 

    open() { 
     this.showModal.setState = true 
    } 

    close() { 
     this.showModal.setState = false 
     } 

    render() { 

     const { dispatch, isAuthenticated, errorMessage } = this.props; 


     return (
      <div> 
       <Navbar className="navbar navbar-default navbar-fixed-top"> 
        <Navbar.Header> 
         <Navbar.Brand> 
          <IndexLinkContainer to="/"><a href="/">myApp</a></IndexLinkContainer> 
         </Navbar.Brand> 
         <Navbar.Toggle /> 
        </Navbar.Header> 
        <Navbar.Collapse> 
         <Nav pullRight> 

          {!isAuthenticated && 
          <Button bsStyle="primary" onClick={this.open}>Login</Button> 
          } 

          {isAuthenticated && 
          <Logout onLogoutClick={() => dispatch(logoutUser())} /> 
          } 

         </Nav> 
        </Navbar.Collapse> 
       </Navbar> 

       <Modal show={this.state.showModal} onHide={this.close}> 
        <Modal.Header closeButton> 
         <Modal.Title>Login</Modal.Title> 
        </Modal.Header> 
        <Modal.Body> 
         <Login 
          errorMessage={errorMessage} 
          onLoginClick={ creds => dispatch(loginUser(creds)) } 
         /> 
        </Modal.Body> 
       </Modal> 
      </div> 
     ) 
    } 

} 

Navigation.propTypes = { 
    dispatch: PropTypes.func.isRequired, 
    isAuthenticated: PropTypes.bool.isRequired, 
    errorMessage: PropTypes.string, 
} 

ページの負荷を細かいですが、私のモーダルボタンをクリックしてから起動していない：Loginをクリックすると残念ながら、私は次のエラーを取得します。私は反応と反応ブートストラップを使用しています。あなたはここでやっているようES6クラスを使用する場合

、あなたの方法は、あなたがthis.openのようなあなたのJSXのイベントハンドラを持っている場合、つまり自動バインドしていない、そしてthis：あなたはあなたのコード内のいくつかのバグを持っている右のよう

Answer 1

したがって、あなたが関数内で行うことは、thisを使用することができません。修正するには、好ましくは、コンストラクタで、どこかに結合するが、インラインで行うことができます。

onClick={this.open.bind(this)} 

第二の問題は、機能自体はランダムの何かのようなものをやっているということです。もちろん、this.showModalは上記のバインディングの問題が原因でエラーをスローしますが、バインディングを使用しても、どのように状態変数にアクセス/設定するかは異なります。代わりに、次のように切り替えます。

this.setState({ showModal: true }) // or false for `close` 

正常に動作するはずです。