Uncaught TypeError: Cannot read property 'showModal' of null

Question

我正在尝试使用以下代码 here 并将登录重构为模态。不幸的是，单击 Login 时出现以下错误：

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

页面加载正常，但我的模式无法通过单击按钮启动。我正在使用反应和反应-bootstrap.

Answer 1

对，所以你的代码中有几个错误：

当你在这里使用 ES6 class 时，你的方法不会自动绑定，这意味着如果你的 JSX 上有一个事件处理程序，比如 this.open，那么 this 是错误的上下文因此您在函数中所做的任何事情都将无法使用 this。要修复，绑定某处，最好是在构造函数中，但可以内联完成：

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

第二个问题是函数本身在做一些随机的事情。当然 this.showModal 会因为上面提到的绑定问题而抛出错误，但即使有绑定，这也不是你 access/set 状态变量的方式。相反，切换到：

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

然后它应该开始正常工作。

Uncaught TypeError: Cannot read property 'showModal' of null

Uncaught TypeError: Cannot read property 'showModal' of null

reactjs

react-bootstrap