ObservableArray.map (..)에서 이벤트 처리기를 바인딩 할 때 MobX 오류가 발생합니다.

Question

React 구성 요소에 ObservableArray를 매핑하면 완벽하게 작동하지만 ObClickable 이벤트 핸들러를 아래에 추가 할 때마다 오류. 매핑 루프 외부의 구성 요소에 처리기를 추가하면 의도 한대로 작동합니다. 어떤 제안?

구성 요소

@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}/>; 
    }; 
    // ... 
}