我正在一个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
答案 0 :(得分: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}/>;
};
// ...
}