Question

我正在创建一个使用表视图的react类，并在单击其中一行时尝试访问this.state.data。问题是在行选择的回调函数中this.state为空。但是，当我单击另一个UI元素来登录`this.state.data'时，它会正确记录数据。为什么会这样？

这是我的代码：

class NS2  extends React.Component {

  constructor(props) {
    super(props);

    this.state = {
      typeIndex: props.typeIndex,
      data: tableData
    };

  }

  getData() {
    alert(JSON.stringify(this.state.data));
  }

  getOptions() {
    return {
      onRowClick: function(row) {
        alert('data: ' + this.state.data);
        //alert(`You click row name: ${row.name}`);
      },
      onRowDoubleClick: function(row) {
        alert(`You double click row name: ${row.name}`);
      }
    };
  }

  render() {

    return (
      <div>
        <Grid>
          <Row>
            <Col sm={12} md={6}>
              <BootstrapTable data={this.state.data} version='4' options={ this.getOptions() }>
                <TableHeaderColumn isKey dataField='name' isKey>Name</TableHeaderColumn>
                <TableHeaderColumn dataField='img' dataFormat={imageFormatter}>Images</TableHeaderColumn>
                <TableHeaderColumn dataField='speed'>Speed</TableHeaderColumn>
                <TableHeaderColumn dataField='units'>Units</TableHeaderColumn>
                <TableHeaderColumn dataField='boxes'>Boxes</TableHeaderColumn>
              </BootstrapTable>

            </Col>
            <Col  sm={12} md={6}>
              <a className="btn" onClick={() => this.getData()}>
                <span>View Selection</span>
              </a>
            </Col>
          </Row>
        </Grid>

      </div>

    );
  }

}

注意：该按钮将调用getData()，并显示正确的数据。用于行选择的回调位于getOptions中，它为this.state.data：TypeError: Cannot read property 'data' of undefined返回null（引发错误）。

Answer 1

这是由于未将功能绑定到组件

尝试

class NS2  extends React.Component {

constructor(props) {
super(props);

this.state = {
  typeIndex: props.typeIndex,
  data: tableData
};
this.getOptions = this.getOptions.bind(this)
this.onRowClick = this.onRowClick.bind(this)
}

getData() {
  alert(JSON.stringify(this.state.data));
}
onRowClick(row) {
   alert('data: ' + this.state.data);
}
onRowDoubleClick(row) {
   alert(`You double click row name: ${row.name}`);
}
getOptions() {
  return {
    onRowClick: this.onRowClick,
    onRowDoubleClick: this.onRowDoubleClick
  };
 }
...//rest of your code

由于您不在onRowDoubleClick函数中使用“ this”，因此不需要将“ this”绑定到组件

希望这会有所帮助

Answer 2

您需要按照Avinash的建议进行绑定，如果您不想拆分getOptions，则可以这样做：

getOptions() {
    const self = this;
    return {
      onRowClick: function(row) {
        alert('data: ' + self.state.data);
        //alert(`You click row name: ${row.name}`);
      },
      onRowDoubleClick: function(row) {
        alert(`You double click row name: ${row.name}`);
      }
    };
  }

无法识别this.state.data

2 个答案: