收到此错误：“TypeError：无法读取未定义的属性'setState'”[重复]答案

【问题标题】：Getting this error: "TypeError: Cannot read property 'setState' of undefined" [duplicate]收到此错误：“TypeError：无法读取未定义的属性'setState'”[重复]
【发布时间】：2018-06-18 09:38:10
【问题描述】：

我说过要学习 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});
    }

}

【问题讨论】：

为什么this.pageTemplates.loginPageTemplate 在该州？我想您需要存储当前页面状态，例如 login 或 main。

标签： reactjs

【解决方案1】：

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

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

编辑澄清：您在构造函数中的绑定非常好，但它现在不影响和绑定this.state.currentPage，即return 在render() 方法中的render()； p>

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

但是，如果您将this.pageTemplates.loginPageTemplate 直接渲染为元素

render() {
    return (<div className="loginPage"> ... </div>);
};

在render() 方法中，它可以很好地工作而无需更改input 元素的onClick 属性。因此，下面的代码将是一个清晰的示例，可以更好地理解它。

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"});
    }

}

【讨论】：

但是为什么我在构造函数中编写的绑定不起作用？
在渲染方法中绑定不是一个好方法，请查看stackoverflow.com/questions/45053622/…
现在，您正在使用return this.state.currentPage 在render() 方法中将loginPageTemplate 渲染为状态变量。这样做时，具有onClick={this.checkLogIn} 属性的input 元素不受构造函数中this.checkLogIn = this.checkLogIn.bind(this) 绑定的影响。这就是为什么当您单击按钮时，this 未定义。所以尝试改变你的代码，直接在你的render() 中渲染loginPageTemplate 为render() { <div className="loginPage"> ... </div> }; 你会得到它。
@KURWAMAN 更新了答案并添加了另一个示例以进行澄清。希望对您有所帮助。
@KartalErkoç 谢谢你的解释，现在我明白了。

【解决方案2】：

或使用以下内容：

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

工作示例：

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

【讨论】：