Question

我有一个自定义组件，需要访问我的一个实际组件状态（行）。我在构造函数中定义了它，但是当它应该被渲染时，this.state似乎总是空的，我不知道为什么......

控制台始终显示＆＃34;未定义this.state＆＃34;。

这是我的代码：

export class TableContainer extends React.Component<any, any> {
    constructor(props : any, context: any) {
        super(props,context);
        this.state = { 
            rows:[ 
                { id: 1, title: 'John', count: 32 },
                { id: 2, title: 'Carl', count: 18 },
                { id: 3, title: 'Mike', count: 25 }
            ]
        };
    }

    rowGetter(i: number) {
        if(this.state) {
            console.log('defined this.state');
            return this.state.rows[i];
        }
        else {
            console.log('undefined this.state');
            return {};
        }
    }

    render() {
        return  (
            <div id="events-container">
                <ReactDataGrid
                    columns={this.state.columns}
                    rowGetter={this.rowGetter}
                    rowsCount={this.state.rows.length}
                    minHeight={500} 
                />
            </div>
        );
    }    
}

我是新人，所以可能是一个小错误。我必须准确地说rowsCount得到了好的＆＃34; this.state.rows.length＆＃34;在渲染功能中。

先谢谢你

Answer 1

在此表达式rowGetter={this.rowGetter}中，您将方法传递给ReactDataGrid组件。然后它在内部调用rowGetter，javascript函数以这种方式工作，这个函数this链接到调用对象。这意味着您必须以某种方式将rowGetter方法绑定到组件实例，以便将this链接到它。

有几种方法：

直接{this.rowGetter.bind(this)} - 因为每次创建功能都缺乏效率
this.rowGetter = this.rowGetter.bind(this) - 详细方式
您可以将rowGetter方法重写为箭头功能 - 我认为这是最好的方法。它看起来像这样：

＆＃13;

rowGetter = (i: number) => {
  if(this.state) {
    console.log('defined this.state');
    return this.state.rows[i];
  }
  else {
    console.log('undefined this.state');
    return {};
  }
}

＆＃13;

现在this链接到父上下文，这是您的组件实例 - 正是您需要的。

Answer 2

正在从另一个上下文调用该函数。你将bind函数置于正确的上下文中：

rowGetter={this.rowGetter.bind(this)}

或通过＆＃34;胖箭＆＃34;：

宣布该功能

rowGetter = (i: number) => {
    if(this.state) {
        console.log('defined this.state');
        return this.state.rows[i];
    }
    else {
        console.log('undefined this.state');
        return {};
    }
}

Answer 3

您需要在构造函数中将方法绑定到此：

    constructor(props : any, context: any) {
        super(props,context);
        this.state = { 
            rows:[ 
                { id: 1, title: 'John', count: 32 },
                { id: 2, title: 'Carl', count: 18 },
                { id: 3, title: 'Mike', count: 25 }
            ]
        };
this.rowGetter = this.rowGetter.bind(this);
    }

Answer 4

你可以有2个选择。

使用bind（this）
```
this.rowGetter.bind(this)
```

2.使用箭头功能，然后您不想使用 bind

this.state在方法中未定义

4 个答案: