无法读取未定义的属性'headers'，即使已定义属性

Question

所以我偶然发现了这段代码，并想将它与我创建的表结合起来。我处理并粘贴了它，以分解并理解它。但我一直在遇到这个问题，"；无法读取未定义的"的属性"headers"；。我还是个新手，但我已经做过很多次这种事情了，我只是想知道为什么会发生这种事

代码：

const TableDnD = (superclass) => class extends superclass {
constructor() {
super();
this.state = this.state || {};
this.state.columnX = 0;
this.state.columnY = 0;
this.state.dragging = false;
}
dragHandle(children) {
return (
<span onMouseDown={this._onStartDrag.bind(this)}>
{children}
</span>
)
}
dragContainer(children) {
const dragColumn = this.state.dragging ? this._renderDragColumn() : null;
const styles = {
position: "relative"
};
return (
<div
onMouseUp={this._endDrag.bind(this)}
onMouseMove={this._updateStyles.bind(this)}
onMouseOver={this._isOver.bind(this)}
onMouseLeave={this._exitWithoutChange.bind(this)}
style={styles}
ref={(container) => this.container = container}
>
{children}
{dragColumn}
</div>
)
}
// Bunch of code for drag and drop table
}
class Table extends TableDnD(Component) {
constructor(props) {
super(props);
this.state = {
headers: this.props.headers, // right here the error haapens
data: this.props.data,
}
}
// other code
// render the component
render() {
const headers = this.renderHeaders();
const data = this.renderRows();
// And finally, the table must be wrapped in the dragContainer method. That's it!
return this.dragContainer(
<table className="table">
<thead>
<tr>
{headers}
</tr>
</thead>
<tbody>
{data}
</tbody>
</table>
);
}
}
export default Table

就在"headers:this.props.headers"处，数据也是如此。错误：无法读取未定义的属性"headers"。

甚至我也声明了header属性。

我是不是错过了什么？

Answer 1

应该是props.headers，而不是this.props.headers。

data的下一行也会发生同样的事情