未捕獲TypeError：無法讀取屬性'showModal'空

我試圖採取以下代碼here並將登錄重構爲模態。不幸的是點擊Login時，我得到了以下錯誤：未捕獲TypeError：無法讀取屬性'showModal'空

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, 
}

的頁面加載罰款，但我的模式沒有從點擊按鈕啓動。我正在使用react和react-bootstrap。

來源

2016-08-22 whoisearth

右鍵所以你必須在你的代碼的幾個錯誤：

當使用ES6類，你在這裏做，你的方法不autobind這意味着，如果你有一個事件處理程序在你的JSX像this.open，然後this是錯誤的上下文，因此您在該功能中執行的任何操作都將無法使用this。要修復，綁定的地方，最好是在構造函數，但可以通過內聯完成：

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

第二個問題是函數本身是做什麼樣的隨機。當然this.showModal由於上面提到的綁定問題而引發錯誤，但即使使用綁定，也不是如何訪問/設置狀態變量。相反，切換到：

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

它應該然後開始正常工作。

來源

2016-08-22 22:34:18 ZekeDroid

我在這裏是非常新的，所以我試圖解析你的答案，試圖讓它適合我現有的代碼。幽默在這裏如何實際上看起來菜鳥？我嘗試在構造函數中的'this.state ...'之後放入'onClick = {this.open.bind（this）}'，並在'this'後面的'.'處得到一個錯誤。 – whoisearth

認爲我得到了它與以下內容。在構造函數中我添加了 - 「this.open = this.open.bind（this）'然後在渲染前我有以下內容 - open（）{this.setState（{showModal：true}）}'模態出現：） – whoisearth

哈哈肯定的是，學習React和JavaScript可以讓人望而生畏:)所以，忘記我對構造函數所說的話，讓你的生活更輕鬆。我的意思是將它添加到實際的JSX中：'' – ZekeDroid

未捕獲TypeError：無法讀取屬性'showModal'空

回答

相關問題