ObservableArray.map（..）でイベントハンドラをバインドするときにMobXがエラーを投げる

Question

ReactコンポーネントのObservableArrayをマッピングしていますが、これは問題なく動作していますが、その下のOnClickイベントハンドラを追加するたびに、エラー。マッピングループ外のコンポーネントにハンドラを追加することは意図した通りに機能します。助言がありますか？

は機能が結合されていない成分

@observer 
export default class GroupsTable extends React.Component<Props, void> { 
    constructor() { 
    super(); 

    //... 
    } 

    private renderRows(groups) { 
    return groups.map(this.renderRow); 
    } 

    private bla() 
    { 
    console.log("blob"); 
    } 

    private renderRow(group) { 
    return <GroupRow group={group} onClick={this.props.store.selectGroup}/>; 
    } 

MobXストア

export default class AccessPermissionStore { 
    @observable public groups = Array<Group>(); 

    @action 
    public selectGroup() { 
    console.log("YAAAY!"); 
    } 

エラー

[mobx] Catched uncaught exception that was thrown by a reaction or observer component, in: 'Reaction[GroupsTable#0.render()] TypeError: Cannot read property 'props' of undefined 
    at renderRow (http://localhost:8080/client.bundle.js:2030:90) 
    at Array.map (native) 
    at ObservableArray.<anonymous> (http://localhost:8080/client.bundle.js:5392:26) 
    at GroupsTable.renderRows (http://localhost:8080/client.bundle.js:2020:28) 
    at GroupsTable.render (http://localhost:8080/client.bundle.js:2064:27) 
    at Object.allowStateChanges (http://localhost:8080/client.bundle.js:4183:16) 
    at http://localhost:8080/client.bundle.js:2836:45 
    at trackDerivedFunction (http://localhost:8080/client.bundle.js:4468:21) 
    at Reaction.track (http://localhost:8080/client.bundle.js:4779:23) 
    at GroupsTable.reactiveRender [as render] (http://localhost:8080/client.bundle.js:2832:18) 

Uncaught (in promise) Error: GroupsTable.render(): A valid React element (or null) must be returned. You may have returned undefined, an array or some other invalid object. 
    at invariant (vendor.bundle.js:9108) 
    at ReactCompositeComponentWrapper._renderValidatedComponent (vendor.bundle.js:24058) 
    at ReactCompositeComponentWrapper._updateRenderedComponent (vendor.bundle.js:23973) 
    at ReactCompositeComponentWrapper._performComponentUpdate (vendor.bundle.js:23951) 
    at ReactCompositeComponentWrapper.updateComponent (vendor.bundle.js:23872) 
    at ReactCompositeComponentWrapper.performUpdateIfNecessary (vendor.bundle.js:23788) 
    at Object.performUpdateIfNecessary (vendor.bundle.js:16166) 
    at runBatchedUpdates (vendor.bundle.js:15753) 
    at ReactReconcileTransaction.perform (vendor.bundle.js:17054) 
    at ReactUpdatesFlushTransaction.perform (vendor.bundle.js:17054) 

Uncaught (in promise) Error: [mobx] Invariant failed: It is not allowed to change the state when a computed value or transformer is being evaluated. Use 'autorun' to create reactive functions with side-effects. 
    at invariant (client.bundle.js:6146) 
    at checkIfStateModificationsAreAllowed (client.bundle.js:4454) 
    at ObservableValue.prepareNewValue (client.bundle.js:5924) 
    at setPropertyValue (client.bundle.js:5849) 
    at AccessPermissionStore.set [as unassignedPeople] (client.bundle.js:5817) 
    at client.bundle.js:6465 

Answer 1

を反応させます、thisの値は期待どおりになりません。たとえば、プロパティの初期化された矢印関数を使用：

@observer 
export default class GroupsTable extends React.Component<Props, void> { 
    constructor() { 
    super(); 
    // ... 
    } 

    renderRows = (groups) => { 
    return groups.map(this.renderRow); 
    }; 

    renderRow = (group) => { 
    return <GroupRow group={group} onClick={this.props.store.selectGroup}/>; 
    }; 
    // ... 
}