Question

当我在函数内调用 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;

Answer 1

在item函数中未定义this关键字。这只是React的许多细微差别之一。通常，在传统的香草JavaScript中，testing关键字指的是最接近的对象，该对象比其使用的上下文（没有绑定）高一级。

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

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

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

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 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;外部声明您的methods是一种很好的经验法则，以将逻辑与标记分开。

Answer 2

使用箭头功能或其他功能绑定“ this”

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

在React JS中如何在函数内部使用State？

2 个答案: