Reactjs 获取此错误：“quot；TypeError:无法读取属性'；设置状态'；“未定义”的定义；

我已经声明要学习React，但不理解如何正确使用

状态

。获取错误

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

}

类应用程序扩展组件{
建造师（道具）{
超级（道具）；
此.state={
当前页面：this.pageTemplates.loginPageTemplate
};
this.checkLogIn=this.checkLogIn.bind（this）；
};
页面模板={
loginPageTemplate：(
),
主页模板：(
)
};
render（）{
返回此.state.currentPage；
};
checkLogIn（）{
this.setState（{currentPage:this.pageTemplates.mainPageTemplate}）；
}
}

您需要更改

input

元素的

onClick

属性，并在

checkLogIn

事件处理程序中引用

this.setState

时绑定

this

。编辑

onClick

属性，如下所示

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

但是，如果您直接将

this.pageTemplates.loginPageTemplate作为元素呈现

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

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

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

但是，如果您直接将
this.pageTemplates.loginPageTemplate作为元素呈现

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

或使用以下各项：

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

工作示例：

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

或使用以下各项：

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

工作示例：

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

为什么
this.pageTemplates.loginPageTemplate仍处于状态？我想您需要存储当前页面状态，如
login
或
main
。为什么
this.pageTemplates.loginPageTemplate
处于该状态？我想您需要存储当前页面状态，如
login
或
main
。但为什么不使用我在构造函数中编写的绑定呢？在render方法中绑定不是一个好方法，请立即检查，您正在将
loginPageTemplate
作为状态变量呈现在
render（）中
方法与
一起返回此.state.currentPage
。执行此操作时，具有
onClick={this.checkLogIn}
属性的
input
元素不受构造函数中的
this.checkLogIn=this.checkLogIn.bind（this）
绑定的影响。这就是为什么单击按钮时，
此
未定义的原因。因此，请尝试更改代码，并将
loginPageTemplate
直接在
render（）
中呈现为
render（）{…}你会得到的。@KURWAMAN更新了答案，并添加了另一个示例进行澄清。希望能有所帮助。@KartalErkoç感谢您的解释，现在我明白了。但是为什么不使用我在构造函数中编写的绑定呢？在render方法中绑定不是一个好方法，现在检查一下，您正在将
loginPageTemplate
呈现为
render（）中的状态变量
方法与
一起返回此.state.currentPage
。执行此操作时，具有
onClick={this.checkLogIn}
属性的
input
元素不受构造函数中的
this.checkLogIn=this.checkLogIn.bind（this）
绑定的影响。这就是为什么单击按钮时，
此
未定义的原因。因此，请尝试更改代码，并将
loginPageTemplate
直接在
render（）
中呈现为
render（）{…}你会得到的。@KURWAMAN更新了答案，并添加了另一个示例进行澄清。“希望能有帮助。”卡塔勒尔科萨谢谢你的解释，现在我明白了。