Question

我是新手做出反应并试图让React Data Grid使用一些测试数据 - 为什么我会在rowGetter函数中收到this.state未定义的错误？我找不到一个适用于任何地方的例子。

import React, { PropTypes, Component } from 'react';
import ReactDataGrid from 'react-data-grid';

class FilterGrid extends Component {

  static propTypes = {
    columns: PropTypes.array,
    rows: PropTypes.array
  };

  constructor (props) {
    super(props)
    this.state = {
      columns: [],
      rows: []
    }
  }

  componentDidMount() {
    this.setState((prevState, props) => ({
      rows: [
        {key: 'd1', lname: 'Doe', quantity: 3},
        {key: 'd2', lname: 'Simmons', quantity: 97},
        {key: 'd3', lname: 'Walters', quantity: 6}
      ],
      columns: [
        {name: "Quantity", key: "quantity"},
        {name: "Last Name", key: "lname"}
      ]
    }));
  }

  rowGetter(i) {
    return this.state.rows[i];
  }

  render() {
    return  (<ReactDataGrid
      columns={this.state.columns}
      rowGetter={this.rowGetter}
      rowsCount={this.state.rows.length}
      minHeight={500} />);
  }
}

export default FilterGrid;

Answer 1

因为忘了绑定rowGetter，所以在构造函数中绑定它：

constructor (props) {
    super(props)
    this.state = {
      columns: [],
      rows: []
    }
    this.rowGetter = this.rowGetter.bind(this);     //here
}

根据 DOC ：

在JSX回调中你必须要小心这个含义。在 JavaScript，类方法默认不受约束。如果你忘记了绑定this.methodName并将其传递给事件，这将是未定义的 当实际调用该函数时。这不是特定于React的行为;它是how functions work in JavaScript的一部分。

Answer 2

您必须bind回调，或者您无法访问this：

render() {
    return  (<ReactDataGrid
      columns={this.state.columns}
      rowGetter={this.rowGetter.bind(this)}
      rowsCount={this.state.rows.length}
      minHeight={500} />);
  }

但是，每次调用render时，这样的绑定都会重新绑定。最好在构造函数中绑定或创建箭头函数方法：

构造

constructor (props) {
    super(props)
    this.state = {
      columns: [],
      rows: []
    }

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

箭头功能：

  rowGetter = (i) => {
    return this.state.rows[i];
  }

使用ReactDataGrid在rowGetter中对this.state进行未定义的反应

2 个答案: