ReactDataGridを使用してrowGetterでthis.stateを未定義にしました

Question

反応データグリッドをいくつかのテストデータで処理しようとしましたが、私は新しいです - なぜ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をバインドしてイベントに渡すことを忘れた場合は、この関数が実際に呼び出されるときは、 となります。これは反作物特有の行動ではない。 how functions work in JavaScriptの一部です。

Answer 2

あなたはbindコールバックに持っているか、thisへのアクセス権がありません。しかし、このように結合がrenderが呼び出されるたびに再結合する

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

を。コンストラクタで結合するか、または矢印関数法を作る方が良いです：

コンストラクタ：

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

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

矢印機能：

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