Reactjs 如何在React JS中使用函数内部的状态？

我在函数中调用this.state.testState时遇到了这个错误

TypeError:无法读取未定义的属性“状态”

class Home extends Component {
    constructor(props){
    super(props);

        this.state = {
            testState: 'hello'
        }

    }

    render(){
         function testing(){
            let testState123 = this.state.testState
             //some codes
            return testState123;
         }


         return(
              <div>
                   {testing()}
              </div>
         );
    }
}

export default Home;

class Home扩展组件{
建造师（道具）{
超级（道具）；
此.state={
testState:'你好'
}
}
render（）{
功能测试（）{
设testState123=this.state.testState
//一些代码
返回testState123；
}
返回(
{testing（）}
);
}
}
导出默认主页；

使用箭头函数或其他函数绑定“this”

---

this

关键字在

测试功能中未定义。这只是React众多细微差别中的一个。通常，在传统的香草JavaScript中，
this
关键字指的是比所用上下文高一级的最近对象（无绑定）

但是，在React中，您使用类，并且在定义方法时，与您一样，
this
关键字不会隐式绑定到组件的执行上下文。相反，
this
关键字是
undefined
，因为没有更高的对象拥有此组件

class Home extends Component {
    constructor(props){
        super(props);
        this.state = {
            testState: 'hello'
        }
    }

    testing = () => {
       let testState123 = this.state.testState
       //some codes
       return testState123;
    }

    render(){
         return(
              <div>
                  {this.testing()}
              </div>
         );
    }
}
export default Home;

有两种方法可以解决我们的问题，它们都围绕着将
this
关键字绑定到组件

class Home extends Component {
    constructor(props){
        super(props);
        this.state = {
            testState: 'hello'
        }
    }

    testing = () => {
       let testState123 = this.state.testState
       //some codes
       return testState123;
    }

    render(){
         return(
              <div>
                  {this.testing()}
              </div>
         );
    }
}
export default Home;

您可以在构造函数中显式绑定函数，这将把
this
关键字指向组件的上下文

class Home extends Component {
    constructor(props){
        super(props);
        this.state = {
            testState: 'hello'
        }
        this.testing = this.testing.bind(this)
    }

    function(testing){
       let testState123 = this.state.testState
       //some codes
       return testState123;
    }

    render(){
         return(
              <div>
                  {this.testing()}
              </div>
         );
    }
}
export default Home;

class Home扩展组件{
建造师（道具）{
超级（道具）；
此.state={
testState:'你好'
}
this.testing=this.testing.bind（this）
}
功能（测试）{
设testState123=this.state.testState
//一些代码
返回testState123；
}
render（）{
返回(
{this.testing（）}
);
}
}
导出默认主页；

或者可以使用arrow函数，该函数具有词法绑定。这本质上只是意味着您定义的函数继承其父函数的总体上下文。在本例中，它是类组件

class Home extends Component {
    constructor(props){
        super(props);
        this.state = {
            testState: 'hello'
        }
    }

    testing = () => {
       let testState123 = this.state.testState
       //some codes
       return testState123;
    }

    render(){
         return(
              <div>
                  {this.testing()}
              </div>
         );
    }
}
export default Home;

class Home扩展组件{
建造师（道具）{
超级（道具）；
此.state={
testState:'你好'
}
}
测试=（）=>{
设testState123=this.state.testState
//一些代码
返回testState123；
}
render（）{
返回(
{this.testing（）}
);
}
}
导出默认主页；

值得注意的是，在
渲染
之外声明
方法
是一个很好的经验法则，可以将逻辑与标记分离。
只需别名或绑定函数即可<代码>让testState123=this.state.testState；函数测试（）<代码>常量测试=（）=>{