未捕获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'空

回答

相关问题