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