Reactjs 访问类属性时出现错误：TypeError:无法读取/设置属性'；x'；未定义的

我刚刚开始试验JavaScript/TypeScript，我正在用TypeScript构建一个简单的React应用程序。 在我的一个组件中，我希望能够通过一个“状态”来更改组件（组件将彼此成功）

我通过一个类属性

来实现这一点，该类属性的ComponentsToShow

类型为enum

ComponentsToShow

。 在渲染中，我只需对属性进行简单的条件检查，然后将组件更改为渲染

    import React, { Component } from 'react';
    import Init from './Init';
    import SetupTask from './SetupTask';
    import ExecutingTask from './ExecutingTask';
    import Finish from './Finish';


    enum ComponentsToShow {
        Init = 0,
        Setup = 1,
        Executing = 2,
        Finish = 3,
    }

    class Body extends Component {

        whichComponentsToShow: ComponentsToShow;

        constructor(props: any){
            super(props);

            this.whichComponentsToShow = ComponentsToShow.Init;
        }

        advanceComponentsToShow(){
            console.log(this.whichComponentsToShow);
            this.whichComponentsToShow = ComponentsToShow.Setup;  
        }

        render(){
            return(
                <div>
                    { this.whichComponentsToShow === ComponentsToShow.Init  &&
                        <Init onValidation={this.advanceComponentsToShow}/>
                    }
                    { this.whichComponentsToShow === ComponentsToShow.Setup  &&
                        <SetupTask/>
                    }
                    { this.whichComponentsToShow === ComponentsToShow.Executing  &&
                        <ExecutingTask/>
                    }
                    { this.whichComponentsToShow === ComponentsToShow.Finish  &&
                        <Finish/>
                    }
                </div>
            );
        }

    }



    export default Body;

从“React”导入React，{Component}；
从“/Init”导入Init；
从“/SetupTask”导入SetupTask；
从“/ExecutingTask”导入ExecutingTask；
从“/Finish”导入Finish；
枚举组件显示{
Init=0，
设置=1，
执行=2，
完成=3，
}
类主体扩展组件{
whichComponentsToShow：ComponentsToShow；
构造器（道具：任何）{
超级（道具）；
this.whichComponentsToShow=ComponentsToShow.Init；
}
advanceComponentsToShow（）{
console.log（此.whichcomponents显示）；
this.whichComponentsToShow=ComponentsToShow.Setup；
}
render（）{
返回(
{this.whichComponentsToShow==ComponentsToShow.Init&&
}
{this.whichComponentsToShow==ComponentsToShow.Setup&&
}
{this.whichComponentsToShow===ComponentsToShow.Executing&&
}
{this.whichComponentsToShow==ComponentsToShow.Finish&&
}
);
}
}
导出默认体；

我正在对

Init

组件进行回调，该组件允许我调用函数

advanceComponentsToShow（）

在这个函数中，我收到了错误“TypeError:无法读取未定义的属性whichComponentsToShow”。我不能确定为什么这个属性在这里没有定义

---

提前感谢您的帮助。

您必须将

advanceComponentsToShow

函数绑定到以确保它可以访问组件属性

有几种方法

在构造函数中绑定 改用箭头函数 在渲染中绑定

渲染中的箭头函数

this.advanceComponentsToShow（）}/>

我不知道我们需要绑定函数，今晚我会测试一下。谢谢PS：你知道为什么我们需要绑定函数吗？我来自其他语言，所以这对我来说有点奇怪。这是javascript，我的英语不太好，让这些文章给你解释一下

constructor(props: any){
  super(props);

  this.whichComponentsToShow = ComponentsToShow.Init;
  this.advanceComponentsToShow = this.advanceComponentsToShow.bind(this)
}

advanceComponentsToShow = () => {
  console.log(this.whichComponentsToShow);
  this.whichComponentsToShow = ComponentsToShow.Setup;  
}

<Init onValidation={this.advanceComponentsToShow.bind(this)}/>

<Init onValidation={() => this.advanceComponentsToShow()}/>