Question

我已经说过要学习React并且不能正确理解如何使用state。收到错误TypeError：

Cannot read property 'setState' of undefined

我不能使用setState()，也不知道为什么。请帮我理解我做错了什么。我看过类似的问题但他们没有解决我的问题。

这是代码：

class App extends Component {

    constructor(props) {
        super(props);

        this.state = {
            currentPage : this.pageTemplates.loginPageTemplate
        };

        this.checkLogIn = this.checkLogIn.bind(this);
    };

    pageTemplates = {
        loginPageTemplate: (
            <div className="loginPage">
                <div id='signIn'>
                    <div className='loginPageError'/>
                    <input placeholder="Enter your username" id="loginName" type="text"/>
                    <input placeholder="Enter your password" id="loginPass" type="password"/>
                    <input value="SIGN IN" id="logIn" onClick={this.checkLogIn} type="button"/>
                </div>
            </div>),
        mainPageTemplate: (
            <div id='MainPage'>
                <div className='mainSidebar'>

                </div>
            </div>
        )
    };

    render() {
        return this.state.currentPage;
    };

    checkLogIn() {
            this.setState({currentPage : this.pageTemplates.mainPageTemplate});
    }

}

Answer 1

您需要更改onClick元素的input属性并绑定this，因为您在this.setState事件处理程序中引用了checkLogIn。修改您的onClick属性，如下所示;

<input value="SIGN IN" id="logIn" onClick={this.checkLogIn.bind(this)} type="button"/>

编辑以澄清：您在构造函数中的绑定完全正常，但它现在不影响和绑定this.state.currentPage return render()在render() { return this.state.currentPage; };内方法为;

this.pageTemplates.loginPageTemplate

但是，如果您已将render() { return (<div className="loginPage"> ... </div>); };直接渲染为元素

render()

在onClick方法内，它可以在不更改input元素的class App extends Component { constructor(props) { super(props); this.state = { currentPage : "loginPage" }; this.checkLogIn = this.checkLogIn.bind(this); }; render() { // output is "loginPage" in first run // then becomes "mainSidebar" when button clicked console.log(this.state.currentPage); return ( <div className="loginPage"> <div id='signIn'> <div className='loginPageError'/> <input placeholder="Enter your username" id="loginName" type="text"/> <input placeholder="Enter your password" id="loginPass" type="password"/> <input value="SIGN IN" id="logIn" onClick={this.checkLogIn} type="button"/> </div> </div> ); }; checkLogIn() { this.setState({currentPage : "mainSidebar"}); } }属性的情况下正常运行。因此，下面的代码将是一个明确的例子，可以更好地理解它。

{{1}}

Answer 2

或使用以下内容：

onClick={() => this.checkLogIn()}

工作示例：

https://jsfiddle.net/69z2wepo/97603/

得到此错误：“TypeError：无法读取未定义的属性'setState'”

2 个答案: