Javascript 在ObservalArray.map（..）中绑定事件处理程序时发生MobX抛出错误

我正在映射React组件中的ObservalArray，它工作得非常好，但是每当我在下面添加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}/>;
  }

@observer
导出默认类GroupsTable扩展React.Component{
构造函数（）{
超级（）；
//...
}
专用渲染箭头（组）{
返回groups.map（this.renderRow）；
}
私人bla（）
{
控制台日志（“blob”）；
}
私人renderRow（集团）{
返回；
}

MobX商店

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

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

导出默认类AccessPermissionStore{
@可观测公共组=数组（）；
@行动
公共选择组（）{
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

[mobx]捕获了由反应或观察者组件引发的未捕获异常，位于：'reaction[GroupsTable#0.render（）]TypeError:无法读取未定义的属性'props'
在伦德罗(http://localhost:8080/client.bundle.js:2030:90)
at Array.map（本机）
在耳光(http://localhost:8080/client.bundle.js:5392:26)
在GroupsTable.renderRows(http://localhost:8080/client.bundle.js:2020:28)
在GroupsTable.render(http://localhost:8080/client.bundle.js:2064:27)
在Object.allowStateChanges处(http://localhost:8080/client.bundle.js:4183:16)
在http://localhost:8080/client.bundle.js:2836:45
在trackDerivedFunction(http://localhost:8080/client.bundle.js:4468:21)
在反作用轨道上(http://localhost:8080/client.bundle.js:4779:23)
在GroupsTable.reactiveRender[作为渲染](http://localhost:8080/client.bundle.js:2832:18)
未捕获（承诺中）错误：GroupsTable.render（）：必须返回有效的React元素（或null）。您可能返回了未定义的、数组或其他无效对象。
at不变量（vendor.bundle.js:9108）
在ReactCompositeComponentWrapper.\u renderValidatedComponent（vendor.bundle.js:24058）
在ReactCompositeComponentWrapper.\u UpdaterEndedComponent（vendor.bundle.js:23973）
在ReactCompositeComponentWrapper.\u performComponentUpdate（vendor.bundle.js:23951）
位于ReactCompositeComponentWrapper.updateComponent（vendor.bundle.js:23872）
如有必要，在ReactCompositeComponentWrapper.PerformUpdate上（vendor.bundle.js:23788）
如有必要，在Object.performUpdate（vendor.bundle.js:16166）
在RunBatchedUpdate上（vendor.bundle.js:15753）
在ReactReconcietTransaction.perform（vendor.bundle.js:17054）
在ReactUpdatesFlushTransaction.perform（vendor.bundle.js:17054）上
未捕获（承诺中）错误：[mobx]不变量失败：在评估计算值或转换器时，不允许更改状态。请使用“自动运行”创建具有副作用的反应函数。
at不变量（client.bundle.js:6146）
在checkIfStateModificationsAreAllowed（client.bundle.js:4454）
在observeValue.prepareNewValue（client.bundle.js:5924）
在setPropertyValue（client.bundle.js:5849）
在AccessPermissionStore.set[作为未分配的人]（client.bundle.js:5817）
在client.bundle.js:6465

函数未绑定，因此

此

的值将不符合预期。例如，您可以使用属性初始化箭头函数：

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

@observer
导出默认类GroupsTable扩展React.Component{
构造函数（）{
超级（）；
// ...
}
renderRows=（组）=>{
返回groups.map（this.renderRow）；
};
renderRow=（组）=>{
返回；
};
// ...
}

非常感谢！我可以发誓我之前在构造函数中绑定this.renderRow=this.renderRow.bind（this）尝试过，但显然我写了let renderRow=…来代替。难怪…@Lahey没问题！是的，绑定也是构造函数很好的一部分。