reactjs - 即使已定义属性，也无法读取未定义的属性“标题”

Question

所以我遇到了这段代码，想把它和我创建的表结合起来。我应对并粘贴它以分解并理解它。但我一直遇到这个问题，“无法读取未定义的属性'标题'”。我仍然是新手，但我已经做了很多次这种事情，我只是踩着为什么会发生这种情况

代码：

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

就在“标题：this.props.headers”处，与数据相同。错误：无法读取未定义的属性“标题”。

即使我声明了 header 属性。

我错过了什么吗？

标签： reactjs

Answer 1

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

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