React类组件报'count' is not defined错误，点击更新count编译失败

• 直接触发编译报错的原因：你在setState中更新count时直接写了count+1，count变量没有在当前作用域声明，你需要从组件的状态对象this.state中读取旧的count值，写法为this.state.count。
• 隐藏运行时风险：类组件的普通自定义方法默认不会绑定this指向，当你直接把方法绑定给事件时会出现this为undefined的报错，建议同步修正。

基础修复（解决当前报错） #

import React from 'react'
export default class Profile extends React.Component{
    constructor(){
        super();
        this.state={
            name:'Abdur Rehman',
            email: 'abdur@gmail.com',
            count: 0,
        }
    }
    test(){
        this.setState({
            name: 'Jamal',
            email: 'jamal123@gmail.com',
            count: this.state.count + 1
        })
    }
    render(){
        return(
            <div>
                <h1>hello {this.state.name}</h1>
                <h1>Email: {this.state.email}</h1>
                <h1>Count: {this.state.count}</h1>
                {/* 此处用箭头函数包裹已经可以保证this指向正确，可正常运行 */}
                <button onClick={()=>{this.test()}}>Update Name</button>
            </div>
        );
    }
}

优化写法（修复this指向问题，写法更规范） #

import React from 'react'
export default class Profile extends React.Component{
    constructor(){
        super();
        this.state={
            name:'Abdur Rehman',
            email: 'abdur@gmail.com',
            count: 0,
        }
        // 构造函数内绑定this，后续不需要再用箭头函数包裹方法
        this.test = this.test.bind(this)
    }
    test(){
        // 依赖前一次状态的更新推荐使用函数式写法，避免异步更新导致的取值异常
        this.setState(prevState => ({
            name: 'Jamal',
            email: 'jamal123@gmail.com',
            count: prevState.count + 1
        }))
    }
    render(){
        return(
            <div>
                <h1>hello {this.state.name}</h1>
                <h1>Email: {this.state.email}</h1>
                <h1>Count: {this.state.count}</h1>
                <button onClick={this.test}>Update Name</button>
            </div>
        );
    }
}

内容的提问来源于stack exchange，提问作者Abdur Rehman Khalid